Ở bài viết trước ta đã tìm hiểu về Flexbox. Trong bài viết tiếp theo trong series CSS này chúng ta sẽ tìm hiểu về Grid, các thuộc tính của nó cũng như cách sử dụng Grid trong thực tế.

Grid là gì?

CSS Grid Layout là một hệ thống bố cục lưới hai chiều, nhờ sự ra đời của Grid đã thay đổi hoàn toàn cách thiết kế bố cục củawebsite. Trước kia khi thiết kế website, ta thường sử dụng table, float, position nhưng các cách trên sẽ bị bỏ qua mốt số chức năng quan trọng(căn giữa phần tử theo chiều dọc, ...). Flexbox cũng có thể dùng để thiết kế bố cục rất tố nhưng trong một số trường hợp ta sử dụng Grid sẽ nhanh và tiện lợi hơn rất nhiều.

Một số khái niệm quan trọng

Grid Container

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

Như trong hình và code bạn có thể thấy container là toàn bộ phần có viền màu cam và nền màu xám chứa toàn bộ các grid-item hay container là element được gán thuộc tính CSS display: grid.

Grid Item

Grid item là các element con cấp đầu tiên của container của contaier.

<div class="grid-container">
    <div class="grid-item">
        <div class="not-child">1</div>
    </div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
</div>

Như trong code thì div với class not-child không phải là grid item.

Grid Line

Đường kẻ ngang hoặc dọc tạo nên cấu trúc và chia các grid-item được gọi là grid line. Như bạn có thể thấy đường kẻ màu xanh có các số bên dưới chính là là grid line.

Grid Cell

Grid cell là khoảng cách giữa hàng và cột của grid line. Nhưng ô 1 đến 9 hình bên dưới chính là grid-cell.

Grid Area

Grid area là một vùng bao gồm các grid-cell. Ví dụ như vùng bao gồm các cell 4, 5, 7, 8 bên trên là một grid area.

Một số thuộc tính của Grid

Container

grid-template-columns

grid-template-columns dùng đẻ xác định các cột trong grid layout. Các giá trị là kích thước của cột và được cách nhau bởi dấu cách.

grid-template-columns: value value ...

.grid-container {
   // Container sẽ được chia đều ra làm 3 phần mỗi cột một phần
   grid-template-columns: 1fr 1fr 1fr;
   
   // Container sẽ có 3 cột với độ rộng tương ứng
   grid-template-columns: 20% 50% 30%;
   
   // Các cột có độ rộng lần lượt là 200px, 150px, 400px
   grid-template-columns: 200px 150px 400px;
}

grid-template-rows

grid-template-rows dùng đẻ xác định các hàng trong grid layout. Các giá trị là kích thước của hàng và được cách nhau bởi dấu cách.

grid-template-rows: value value ...

.grid-container {
   // Container sẽ được chia đều ra làm 3 phần (chiều dọc) mỗi hàng một phần
   grid-template-rows: 1fr 1fr 1fr;
   
   // Container sẽ có 3 hàng với độ cao tương ứng
   grid-template-rows: 20% 50% 30%;
   
   // Các hàng có độ cao lần lượt là 200px, 150px, 400px
   grid-template-rows: 200px 150px 400px;
}

grid-template-areas

grid-template-areas dùng để xác định một template grid giúp căn chỉnh layout một cách trực quan hơn và thường đi kèm với thuộc tính grid-area ở grid-item.

grid-template-areas:
    "col1 col2 col3"
    "col4 col5 col6"
    ...

Giả sử ta muốn tạo một layout có 2 hàng và 3 cột với ô đầu tiên có chiều rộng là 2 cell ta sẽ có template như sau.

grid-template-areas:
    "col1 col1 col2"
    "col3 col4 col5"

grid-column-gap

grid-column-gap là khoảng trống giữa các cột trong grid layout.

grid-column-gap: <value>

.grid-container {
    grid-column-gap: 1rem;
}

Ta có thể thấy khoảng cách giữa các cột đã được set là 1 rem.

grid-row-gap

Tương tự như grid-cloumn-gap thì grid-row-gap là đối với các hàng.

grid-row-gap: <value>

gap

Ta có thể sử dụng gap để viết tắt cho 2 thuộc tính là grid-column-gap và grid-row-gap.

gap: <grid-row-gap> <grid-column-gap> / <value> (cho cả 2 row và column)

.grid-container {
   gap: 1rem;
}

grid-auto-columns và grid-auto-rows

Hai thuộc tính này dùng để chỉ định kích thước của cột hoặc hàng.

grid-auto-columns/rows: min-content | max-content | auto | <value>

place-items

place-items là shorthand của align-items: start | end | center | stretch (căn theo chiều dọc(column)) và justify-items: start | end | center | stretch (căn theo chiều ngang (row)).

place-items: <align-items> / <justify-items>

.grid-container {
    place-items: center;
}

Item

grid-column

Ta sử dụng grid-column để xác định xem cell được CSS có độ dài như thế nào bằng grid-line(line theo chiều dọc).

grid-column: grid-line-start(số bắt đầu)/grid-line-end(số kết thúc)

.grid-item:first-child {
    grid-column: 1/3;
}

.grid-item:last-child {
    grid-column: 2/4;
}

Ta có thể thấy cell đầu tiên có độ rộng kéo dài từ line 1 đến 3 còn cell cuối cùng có độ rộng kéo dài từ line 2 đến line 4.

grid-row

Ta sử dụng grid-row để xác định xem cell được CSS có độ cao như thế nào bằng grid-line(line theo chiều dọc).

grid-row: grid-line-start(số bắt đầu)/grid-line-end(số kết thúc)

.grid-item:first-child {
    grid-column: 1/3;
    grid-row: 1/4;
}

Tương tự như trên ta thấy cell đầu tiên có độ dài từ line 1 đến line 3 và chiều cao từ line 1 đến line 4.

grid-area

Đưa ra tên được định nghĩa trong template grid-template-areas, grid-item đó sẽ có bố cục giống như trong template.

grid-area: <name-in-template>.

.grid-container {
    width: 500px;
    height: 500px;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2fr 1fr 2fr;
    grid-template-areas:
        "img1 img2 img3"
        "img1 img5 img5"
        "img4 img5 img5"
    ;
}

.grid-item:first-child {
    grid-area: img1;
}

.grid-item:nth-child(2) {
    grid-area: img2;
}

.grid-item:nth-child(3) {
    grid-area: img3;
}

.grid-item:nth-child(4) {
    grid-area: img4;
}

.grid-item:last-child {
    grid-area: img5;
}

Như hình ta có thể thấy dễ dàng tạo layout bằng cách lấy tên được định nhĩa trong grid-template-areas để gán giá trị cho grid-area của grid-item.

Thực hành

Mình sẽ tạo một ví dụ đơn giản về việc sử dụng grid để responsive.

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
    <div class="grid-item">11</div>
    <div class="grid-item">12</div>
    <div class="grid-item">13</div>
    <div class="grid-item">14</div>
    <div class="grid-item">15</div>
    <div class="grid-item">16</div>
    <div class="grid-item">17</div>
</div>

.grid-container {
    display: grid;
    gap: 1rem;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 150px;
}

.grid-item {
    width: 100%;
    height: 100%;
    background-color: #FFAA4C;
    border: 1px solid #5089C6;
    display: flex;
    justify-content: center;
    align-items: center;
}

Ở đây mình có dùng repeat(), minmax() và auto-fit để responsive. Các cột của grid sẽ có chiều rộng giao động từ 250px đến 1fr và auto=fit ở đây dùng để khi chiều dài của block lớn hơn container các block sẽ tự động xuống dòng và giãn ra. Kết quả các bạn có thể xem ở đây.

Tổng kết

Như vậy qua bài viết này mình đã giúp các bạn tìm hiểu về Grid. Nó giúp ta có thể layout một cách dễ dàng. Ngoài ra còn một số thuộc tính hữu dụng khác của Grid mà mình chưa đề cập đến các bạn có thể tham khảo ở đây. Mình hy vọng qua bài viết này các bạn có thể sử dụng được Grid cho những project của mình. Cảm ơn các bạn đã theo dõi đến hết bài viết ❤️.