Ví dụ CSS Grid Bài 6: Grid Area

Điểm hay của CSS Grid là có thể sắp xếp và tái cấu trúc lại trang mà không cần động vào HTML. Ở bài này tôi sẽ hướng dẫn các bạn sử dụng tên xác định vị trí cho các item.

Bạn có thể thoải mái sắp xếp lại các item thông qua tên đã đặt.

Chúng ta có thể tạo các khu vực được đặt tên trên grid để đưa nội dung vào. Để thực hiện điều này, trước tiên chúng ta gán các phần tử trong HTML của chúng ta vào một Grid Area, bằng cách sử dụng thuộc tính grid-area.

Sau đó chúng ta có thể sử dụng thuộc tính grid-template-areas để đặt nó vào vị trí nên đặt.

Sử dụng tên để gọi các item trong Grid

Trước tiên ta sẽ tạo item bằng HTML:

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content</div>
</div>

Đặt tên cho các item trong CSS:

    .sidebar {
        grid-area: sidebar;
/* Tên sidebar trong grid-area là sidebar là đặt cho dễ gọi, dễ nhớ. Ở đây nó ngẫu nhiên trùng lặp, không sao cả*/
    }

    .content {
        grid-area: content;
    }

    .header {
        grid-area: header;
    }

Sắp xếp vị trí các item bằng cách sử dụng tên trong Grid Area

Chúng ta đã tạo các khối và đặt tên chúng. Bây giờ hãy sử dụng tên để sắp xếp chúng trong grid.

Hãy thêm đoạn code bên dưới và bạn sẽ thấy ma thuật trong đó.

    .wrapper {
        display: grid;
    grid-gap: 10px;
        grid-template-columns: 120px  120px  120px;
        grid-template-areas:
               "....... header  header"
               "sidebar content content";
        background-color: #fff;
        color: #444;
    }
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

Việc lặp lại tên của một khu vực cho biết rằng khu vực đó sẽ kéo dài ô đó. Sử dụng một  dấu chấm "." hoặc một chuỗi như .... biểu thị một ô trống. Chẳng hạn như ô đầu tiên trên grid này.

Kết quả như bên dưới: 

Hãy thử thay đổi như sau để hiểu rõ hơn:

        grid-template-areas:
               "....... header  content"
               "sidebar sidebar content";

Grid area là một thuộc tính rất hay, nếu bạn có một website đã có tuổi và bạn muốn làm mới nó. Thật dễ dàng để CSS lại bằng Grid, mà không cần động vào mớ HTML hổ lốn. Sức mạnh của Grid là rất lớn, hãy khám phá nó cùng Seri CSS Grid này.

Bài tiếp theo: Ví dụ CSS Grid Bài 7: Bố cục lại Grid bằng Media Queries