Cách sử dụng CSS Grid

Tổng quan

Bài viết sẽ hướng dẫn bạn cách sử dụng từng thuộc tính của css grid một cách chi tiết nhất.

Cấu trúc của grid

Grid là dạng layout có nhiều cột và nhiều dòng giống như hình dạng của 1 ma trận.

grid-template-columns

Thuộc tính này được sử dụng để định nghĩa số cột và độ rộng của nó.

Ví dụ 1: định nghĩa 3 cột, cột thứ nhất độ rộng 200px, cột thứ 2 độ động co giãn tự động, cột thứ 3 100px.

    grid-template-columns: 200px auto 100px;

Ví dụ 2: định nghĩa 3 cột với độ rộng chia đều bằng nhau

    grid-template-columns: repeat(3, 1fr);

grid-template-rows

Dùng để định nghĩa số dòng và độ rộng của nó.

Ví dụ 1: định nghĩa 3 dòng, dòng thứ nhất độ cao 200px, dòng thứ 2 độ cao co giãn tự động, dòng thứ 3 100px.

    grid-template-rows: 200px auto 100px;

Ví dụ 2: định nghĩa 3 dòng với độ cao chia đều bằng nhau

    grid-template-rows: repeat(3, 1fr);

grid-template-areas

Thuộc tính bố trí vị trí cho các item con bên trong.

Ví dụ:
Định nghĩa vùng:

    grid-template-areas:
    "a a a a    a a a a    a a a a"
    "b b b b    b b b b    c c c c"
    "b b b b    b b b b    c c c c";

đặt item vào trong vùng đã tạo:

   .box-1{
      grid-area: a;
   }
   .box-2{
      grid-area: b;
   }
   .box-3{
      grid-area: c;
   }

column-gap

Dùng để chỉ định khoảng cách giữa các cột.

row-gap

Dùng để chỉ định khoảng cách giữa các dòng.

justify-items

Dùng để canh chỉnh vị trí của giá trị các item con bên trong giao diện grid theo trục x.

align-items

Dùng để canh chỉnh vị trí của giá trị các item con bên trong giao diện grid theo trục y.

justify-content

Dùng để canh chỉnh vị trí của tất cả các item bên trong giao diện gird theo trục x.

align-content

Dùng để canh chỉnh vị trí của tất cả các item bên trong giao diện gird theo trục y.

grid-column : start/end

Sử dụng 2 giá trị bắt đầu và kết thúc để phân phối giao diện.

Ví dụ: chúng ta chia giao diện thành 12 cột trong đó 8 cột đầu là của column thứ nhất, 4 cột sau là của column thứ 2 sẽ thực hiện như sau.

    .container{
        display: grid;
        height: 100vh;

        // Dividing the Width of screen
        // in 12 equal fractions.

        grid-template-columns: repeat(12,1fr);
        grid-gap: 10px;
    }

    .box-1{
        // Cover 4 columns.
        //So, start = 1 || end = 4+1 = 5;

        // grid-column : start/end; 👈 Short-Hand

        grid-column: 1/5;
    }

    .box-2{
        // Cover remaining columns.
        //This value 👇 is taken from .box-1 ☝️
        //So, start = 5 || end = 12+1 = 13;

        // grid-column : start/end; 👈 Short-Hand

        grid-column: 5/13;
    }

grid-row : start/end

Tương tự như grid-column nhưng đối với dòng, chứ không phải cột.

Justify-self

Thuộc tính này dùng để canh vị trí cho giá trị bên trong item của giao diện grid theo trục x.
có vẽ gần giống với justify-items, đúng vậy nó giống với justify-items tuy nhiên nó dùng cho 1 item cụ thể, còn justify-items thì dùng để chỉnh đồng loạt.

align-self

Dùng để canh vị trí cho giá trị bên trong item của giao diện grid theo trục y.
Tương tự như align-items.

Những cách viết tắt

place-content

Dùng để chỉ định cùng lúc align-content và justify-content.

   place-content: align-content/justify-content;

place-items

Dùng để chỉ định cùng lúc align-items và justify-items.

   place-items: align-items/justify-items;

place-self

Dùng để chỉ định cùng lúc align-self và justify-self.

   place-self: align-self/justify-self;

grid-template

Dùng để chỉ định cùng lúc grid-template-rows và grid-template-columns.

   grid-template: grid-template-rows/grid-template-columns;

gap/grid-gap

Dùng để chỉ định cùng lúc row-gap và column-gap.

   gap: row-gap/column-gap;