CSS Grid Layout là một hệ thống bố cục mạnh mẽ cho phép bạn thiết kế giao diện một cách dễ dàng và linh hoạt. Nó cung cấp một cách trực quan để sắp xếp các phần tử trong lưới, cho phép bạn kiểm soát cách các phần tử được sắp xếp và hiển thị trên màn hình. Trong bài viết này, chúng ta sẽ khám phá cách thức hoạt động của hệ thống Grid trong CSS từ cơ bản đến nâng cao.
Hệ thống Grid trong CSS là một mô hình bố cục cho phép bạn tạo ra các lưới với hàng và cột, từ đó bạn có thể dễ dàng định dạng và bố trí các phần tử con bên trong nó. Hệ thống này giúp giảm thiểu việc sử dụng các thuộc tính float hay inline-block, mà vẫn tạo ra các bố cục phức tạp.
Để bắt đầu sử dụng Grid, trước tiên bạn cần xác định một phần tử cha làm Grid container. Để làm điều này, bạn chỉ cần sử dụng thuộc tính display: grid:
.container {
display: grid;
}Bạn có thể xác định số lượng hàng và cột trong Grid container bằng cách sử dụng thuộc tính grid-template-columns và grid-template-rows. Ví dụ:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Tạo 3 cột có chiều rộng bằng nhau */
grid-template-rows: 100px 200px; /* Tạo 2 hàng với chiều cao 100px và 200px */
}Trong ví dụ trên, chúng ta đã tạo ra một lưới với 3 cột và 2 hàng.
grid-column và grid-rowĐể đặt các phần tử con vào trong Grid, bạn có thể sử dụng các thuộc tính grid-column và grid-row. Ví dụ:
.item1 {
grid-column: 1 / 3; /* Chiếm 2 cột từ cột 1 đến cột 2 */
grid-row: 1; /* Chiếm hàng 1 */
}
.item2 {
grid-column: 3; /* Chiếm cột 3 */
grid-row: 1; /* Chiếm hàng 1 */
}<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px;
}
.item1 {
grid-column: 1 / 3; /* Chiếm 2 cột */
}
.item2 {
grid-column: 3; /* Chiếm 1 cột */
}grid-areaBạn có thể định nghĩa một khu vực trong Grid bằng cách sử dụng thuộc tính grid-area. Điều này cho phép bạn dễ dàng quản lý các khu vực trong lưới.
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}auto-fill và auto-fitCSS Grid hỗ trợ các giá trị auto-fill và auto-fit, cho phép bạn tạo ra các cột động dựa trên kích thước phần tử.
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}CSS Grid Layout cung cấp một công cụ mạnh mẽ và linh hoạt cho việc thiết kế giao diện. Từ việc xác định hàng và cột cho đến việc quản lý các phần tử con, hệ thống Grid cho phép bạn xây dựng các layout phức tạp mà không cần phải sử dụng các phương pháp cũ. Hãy thử nghiệm với Grid trong các dự án của bạn để thấy được sức mạnh của nó.
