Chia Cột Bằng Thuộc Tính Display Grid Trong CSS - Cáo Đêm

Trang chủ » Chia Cột Văn Bản Html » Chia Cột Bằng Thuộc Tính Display Grid Trong CSS - Cáo Đêm

Có thể bạn quan tâm

CODE BÀI VIẾT <div class="box"> <div>Nội dung 1</div> <div>Nội dung 2</div> <div>Nội dung 3</div> <div>Nội dung 4</div> <div>Nội dung 5</div> <div>Nội dung 6</div> </div> <style> .box{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; /* chia làm 4 cột */ grid-column-gap: 20px; /* khoảng cách giữa các cột */ grid-row-gap: 20px; /* khoảng cách giữa các hàng cột */ } /* size màn hình dưới 700px sẽ về 2 cột */ @media (max-width: 700px) { .box{grid-template-columns: 1fr 1fr;} /* thành 2 cột */ } /* size màn hình dưới 300px sẽ về 1 cột */ @media (max-width: 300px) { .box{grid-template-columns: 1fr;} /* thành 1 cột */ } .box div{ padding:10px; border:2px solid #999; } </style> Chia cột bằng thuộc tính display grid trong CSS Html & Css ihoan đã viết 4 năm trước

Display grid được sử dụng khá phổ biến hiện nay do sự tiện lợi của nó đem lại, bạn dễ dàng tạo ra các hàng các cột trong thiết kế nội dung cho website, dưới đây là một ví dụ về việc chia cột cho chuyên mục của bài viết.

Cách sử dụng thuộc tính grid

<div class="box"> <div>Nội dung 1</div> <div>Nội dung 2</div> <div>Nội dung 3</div> <div>Nội dung 4</div> <div>Nội dung 5</div> <div>Nội dung 6</div> </div>

Với nội dung HTML ở trên, bạn sẽ thấy có một thẻ div với class là box bao ngoài các thẻ div chứa nội dung, thì thẻ div bao ngoài này sẽ đảm nhận việc chia cột cho các thẻ ở trong.

<style> .box{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; /* chia làm 4 cột */ grid-column-gap: 20px; /* khoảng cách giữa các cột */ grid-row-gap: 20px; /* khoảng cách giữa các hàng cột */ } </style>

grid-template-columns: 1fr 1fr 1fr 1fr Mỗi giá trị 1fr sẽ tương ứng với số cột được tạo ra. grid-column-gap: 20px Đây là khoảng cách giữa các cột. grid-row-gap: 20px Đây là khoảng cách giữa các hàng (nếu nội dung của bạn chỉ có một hàng ngang thì bạn không cần tới lệnh này).

5439 Bài viết cùng chủ đề

Thay đổi màu link khi di chuột vào

Hiệu ứng zoom, phóng to hình ảnh khi đưa chuột vào

Cách để tạo một Modal, Popup bằng HTML, CSS, JS cơ bản

Ẩn bớt nội dung và thêm dấu 3 chấm khi nội dung quá dài

Bộ lọc select tỉnh thành, quận huyện sử dựng API provinces.open-api.vn

Căn giữa Hình ảnh, thẻ Div, Text trong CSS

Xóa bỏ gạch chân cho link trong html css

Chia cột bằng thuộc tính display flex trong CSS

Đọc text trong hình ảnh

Thư viện mã QR kèm logo ở giữa

Từ khóa » Chia Cột Văn Bản Html