Cách tạo CSS Grid theo từng bước

Cách tạo CSS Grid theo từng bước

CSS Grid Layout Module đã nhanh chóng trở nên thông dụng đối với các nhà phát triển giao diện người dùng. Đó là một tiêu chuẩn web mới cho phép tạo bố cục hai chiều với CSS thuần túy. Hãy tưởng tượng một hệ thống grid tương tự như Bootstrap hoặc Foundation, giúp bạn có thể đặt các trang web mà không cần sử dụng các thư viện bổ sung hoặc các hệ thống grid bên ngoài. Với CSS Grid, chúng ta có thể bố trí các phần tử trên trang theo hai trục theo chiều ngang và chiều dọc. Trong bài này, sẽ xem xét làm thế nào để tạo một CSS Grid theo từng bước.

1. Thiết lập các grid container và grid item
CSS Grid bao gồm các đường ngang và dọc (hàng và cột). Các grid track xác định grid item (các grid cell) dễ dàng nhận diện được bởi hàng và cột mà chúng thuộc về. Grid container là phần tử HTML chứa toàn bộ CSS Grid.

Để tạo một phần tử vào grid container, cần sử dụng display: grid; hoặc display: inline-grid;.

CSS Grid cơ bản với ba hàng và ba cột có thể được đánh dấu bằng code HTML sau đây:

<div class="container">
  <div class="cell cell-1">1.</div>
  <div class="cell cell-2">2.</div>
  <div class="cell cell-3">3.</div>
  <div class="cell cell-4">4.</div>
  <div class="cell cell-5">5.</div>
  <div class="cell cell-6">6.</div>
  <div class="cell cell-7">7.</div>
  <div class="cell cell-8">8.</div>
  <div class="cell cell-9">9.</div>
</div>

Trong CSS, sử dụng display: grid; trên phần tử .container để tạo một block-level CSS Grid. Các thuộc tính grid-template-rows và grid-template-columns xác định số lượng và kích thước của hàng và cột trong grid.

Trong đoạn code bên dưới, fr là viết tắt của đơn vị phân số mới. Nó đại diện cho một phần của không gian có sẵn trong grid container. Trong ví dụ, các hàng và cột được chia thành 3 phần bằng nhau.

.container {
  height: 90vh;
  margin: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.cell {
  color: white;
  font-size: 3rem;
  text-align: center;
  padding: 4rem;
}
.cell-1 {
  background: deepskyblue;
}
.cell-2 {
  background: orangered;
}
.cell-3 {
  background: royalblue;
}
.cell-4 {
  background: gold;
}
.cell-5 {
  background: blueviolet;
}
.cell-6 {
  background: limegreen;
}
.cell-7 {
  background: coral;
}
.cell-8 {
  background: lightseagreen;
}
.cell-9 {
  background: maroon;
}

Đây là cách mà CSS grid hiển thị trong trình duyệt bây giờ:

​

Có thể dễ dàng thay đổi kích thước và sắp xếp các grid track bằng cách thêm các giá trị mới vào các thuộc tính grid-template-columns và grid-template-rows. Ví dụ:

.container {
  grid-template-columns: 2fr 1fr 1fr 200px;
  grid-template-rows: 1fr 1fr 1fr;
}

Vì có 4 cột thay vì 3 trong grid được sửa đổi, nên div .cell-9 có thể được tìm thấy một mình trong hàng thứ ba:

​

2. Thêm các gutter
Thuộc tính grid-gap là shorthand của grid-row-gap và grid-column-gap. Chúng ta có thể sử dụng nó để bổ sung nhanh chóng các khoảng trống giữa các grid track.

Trở lại grid 3*3 trước đó và thêm gap 10px giữa các grid cell. Có thể thêm thuộc tính grid-gap vào grid container theo cách sau:

.container {
  grid-gap: 10px 10px;
}

Trong trình duyệt, có thể thấy rằng hiện tại có một khoảng trống gọn gàng giữa các grid cell:

​

3. Định vị các grid cell
Có thể chỉ định kích thước và vị trí của từng grid cell bằng cách sử dụng các thuộc tính của grid-row và grid-column. Cần thêm hai thuộc tính này vào các grid cell muốn định vị.

Trước tiên, hãy xem một trường hợp đơn giản. Giả sử muốn di chuyển ô 1 đến hàng thứ hai và cột thứ ba trong grid (đến vị trí hiện tại của ô 6). Để làm như vậy, chỉ cần thêm hai quy tắc CSS sau đây vào .cell-1:

.cell-1 {
  grid-row: 2;
  grid-column: 3;
}

Có thể thấy, ô 1 đã được di chuyển đến vị trí nhắm đến và phần còn lại của các ô tiếp tục theo thứ tự mặc định:

​

4. Kích thước của các grid cell
Không thể chỉ sử dụng các thuộc tính của grid-row và grid-column để thay đổi thứ tự của các ô, nhưng chúng cho phép sửa đổi kích thước của chúng. Trên thực tế, cả hai đều là những ký tự viết tắt. Thuộc tính grid-row là viết tắt của grid-row-start và grid-row-end, trong khi grid-column là viết tắt của grid-column-start và grid-column-end

Nếu muốn Cell 1 chiếm hết hàng đầu tiên. Có thể thực hiện bố trí bằng cách thêm các quy tắc sau:

cell-1 {
  grid-row: 1;
  grid-column: 1/4;
}

Bây giờ, có thể thấy ô Cell 1 trải dài trên toàn bộ hàng đầu tiên và đẩy tất cả các ô còn lại ra sau:

​

Thuộc tính grid-row hoạt động giống như grid-column. Giả sử muốn thực hiện bố cục phức tạp hơn và có một khu vực nội dung chính cạnh tiêu đề (Cell 1). Ví dụ: mở rộng ô 2 qua cột thứ nhất, cột thứ hai và hàng thứ hai, hàng thứ ba sử dụng code sau:

.cell-2 {
  grid-row: 2/4;
  grid-column: 1/3;
}

Khu vực nội dung chính được mở rộng đã sẵn sàng trong trình duyệt:

​

5. Xác định các khu vực grid được đặt tên
Trên thực tế, có thể thực hiện bất kỳ loại bố cục phức tạp nào với CSS Grid. Tuy nhiên, nếu grid trở nên quá phức tạp thì có thể gây khó khăn để theo dõi tất cả các hàng và cột với cách trích dẫn chúng bằng số. Để giúp các nhà phát triển vượt qua khó khăn này, CSS Grid đã giúp chúng ta có thể dễ dàng nhớ các khu vực được đặt tên trước.

Giả sử muốn thực hiện bố cục trang blog đơn giản với header, footer, khu vực nội dung chính và hai sidebar (bên trái và bên phải). Mặc dù đây không phải là một bố cục rất phức tạp nhưng nó vẫn có thể thoải mái hơn để tham khảo các grid cell theo tên của chúng.

HTML tương tự như ví dụ trước. Chỉ đơn giản xếp chồng các cell vào nhau. Tuy nhiên, vì mục đích tiếp cận, ở đây sẽ sử dụng các thẻ HTML ngữ nghĩa: header, main, aside, footer.

<div class="container">
  <header class="cell cell-1">Header</header>
  <aside class="cell cell-2">Left sidebar</aside>
  <main class="cell cell-3">Main content</main>
  <aside class="cell cell-4">Right sidebar</aside>
  <footer class="cell cell-5">Footer</footer>
</div>

Trong CSS, cần phải sử dụng hai thuộc tính mới: grid-template-areas trên grid container và grid-area trên từng khu vực grid riêng biệt.

Trước hết, hãy sử dụng thuộc tính grid-area trên các grid cell và đặt cho chúng mỗi một tên riêng biệt. Trong ví dụ, sử dụng tên “header”, “left”, “main”, “right”, and “footer”, bạn có thể thay thế bằng bất cứ tên gì bạn muốn.

Tiếp theo, thêm thuộc tính grid-template-areas vào grid container. Đây là một thuộc tính thực sự hữu ích, vì nó cho phép sắp xếp các grid cell một cách trực quan. Trong ví dụ, khu vực nội dung chính sẽ rộng gấp đôi sidebar. Vì vậy, chỉ định một cột là sidebar trái, một cột là khu vực chính và một cột là sidebar phải.

Cả header và footer sẽ trải dài trên toàn màn hình, chỉ định 3 cột cho chúng. Thiết lập chiều rộng và chiều cao của các hàng và cột với grid-template-rows và grid-template-columns giống như trước:

.container {
   height: 90vh;
   width: 90vw;
   margin: 2rem auto;
   display: grid;
   grid-template-areas: "header header header"
                        "left main right"
                        "footer footer footer";
   grid-template-rows: 1fr 3fr 1fr;
   grid-template-columns: 1fr 2fr 1fr;
}
.cell-1 {
   background: deepskyblue;
   grid-area: header;
}
.cell-2 {
   background: orangered;
   grid-area: left;
}
.cell-3 {
   background: limegreen;
   grid-area: main;
}
.cell-4 {
   background: gold;
   grid-area: right;
}
.cell-5 {
   background: blueviolet;
   grid-area: footer;
}
.cell {
   color: white;
   font-size: 2.5rem;
   text-align: center;
   padding: 4rem;
}

Như những gì có thể thấy trên ảnh chụp màn hình dưới đây, thuộc tính grid-template-areas và grid-area đã tự động tạo ra grid mà chúng ta muốn:

​

6. Tạo các grid lồng vào nhau
Vì cách bố trí grid chỉ áp dụng cho child trực tiếp của grid container, child lower-level sẽ không phải là các grid item. Tuy nhiên trong nhiều trường hợp có thể muốn các phần tử đó trở thành grid cell. May mắn thay, CSS Grid Layout Module cho phép các grid item cũng là các grid container. Các grid lồng vào nhau làm việc theo các quy tắc tương tự như các hệ thống độc lập.

Ví dụ: giả sử muốn chia footer thành bốn cột bằng nhau. Trong HTML, chỉ cần thêm bốn div vào footer theo cách sau:

<div class="container">
   <header class="cell cell-1">Header</header>
   <aside class="cell cell-2">Left sidebar</aside>
   <main class="cell cell-3">Main content</main>
   <aside class="cell cell-4">Right sidebar</aside>
   <footer class="cell cell-5">
       <div class="cell cell-6">Footer 1</div>
       <div class="cell cell-7">Footer 2</div>
       <div class="cell cell-8">Footer 3</div>
       <div class="cell cell-9">Footer 4</div>
   </footer>
 </div>

Trong CSS, thêm thuộc tính display: grid; cho .cell-5 và thiết lập chiều rộng của các cột và các khoảng trống cột bằng cách sử dụng các thuộc tính grid-template-columns và grid-column-gap:

.cell-5 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-column-gap: 1rem;
}
.cell-5 .cell {
   background-color: coral;
}

Nếu kiểm tra ví dụ này trong trình duyệt thì bây giờ có thể thấy rằng footer đã được chia thành bốn cột bằng nhau thực sự:

​

Tính năng lồng vào nhau này làm cho các nhà phát triển web có khả năng sử dụng CSS Grid trong các bố cục thực tế, nơi nesting thường xảy ra ở nhiều cấp độ khác nhau.

Kết luận
Các trình duyệt hỗ trợ cho CSS Grid đã được cải thiện rất nhiều trong nhiều năm gần đây, bạn có thể bắt đầu sử dụng nó một cách an toàn để phát triển web.

PVS - Theo Developerdrive​