Sử dụng Gird Css một cách dễ dàng hơn

Grid Container
Tạo vùng chứa lưới bằng cách đặt thuộc tính hiển thị với giá trị grid hoặc inline-grid. Tất cả các con trực tiếp của các thùng chứa grid containers đều trở thành các mục grid items.

Chia số cột

/*grid-teamplate-columns: column-size column-size .... */

/Chia số columns theo size cho sẵn px/

grid-template-columns: 200px 200px 100px;
/Chia số rows theo size cho sẵn px/

grid-template-rows: 350px 100px 350px;
/Chia số cột theo fr %/

grid-template-columns: 1fr 1fr 1fr;

khoảng trống giữa cột và hàng

Giá trị kích thước khoảng cách có thể là bất kỳ giá trị độ dài, không âm nào (px,%, em, v.v.)

grid-row-gap:    20px;
grid-column-gap: 5rem;

grid-spacing là viết tắt của khoảng cách lưới-hàng và khoảng cách cột-lưới.
Nếu hai giá trị được chỉ định, giá trị đầu tiên biểu thị khoảng cách lưới-hàng và khoảng cách lưới-cột-thứ hai.

grid-gap: 100px 1em

Một giá trị đặt khoảng cách hàng và cột bằng nhau.

grid-gap: 2rem

/* gap: grid-row-gap grid-column-gap / / gap: chia khoảng cách theo column */

grid-column-gap: 20px;
/* gap: chia khoảng cách theo rows */

grid-row-gap: 20px;
/* gap: gộp */

grid-gap: 20px 40px;

chia rows và column theo track-line

/* gird-column: track-line-start / tracck-line-end */

grid-column: 1/3;
grid-row: 1/2;

chia theo rows và colums: grid-teamplate-areas

Grid items có thể được xếp lớp / xếp chồng lên nhau bằng cách định vị chúng đúng cách và chỉ định z-index khi cần thiết.
 

/* grid-teamplate-areas: dùng cho phần tử cha grid-areas: dùng cho phần tử con */

grid-template-areas: "h1 h1 h2 h3" "h4 h5 h2 h3" "h4 h5 h6 h6" ;

grid-area: h1;

grid-area: h2;

grid-area: h3;

grid-area: h4;

grid-area: h5;

grid-area: h6;

Kích thước theo dõi lưới min và max

grid-template-rows:    minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;

Hàm minmax () chấp nhận 2 đối số: đối số đầu tiên là kích thước tối thiểu của track và đối số thứ hai là kích thước tối đa. Cùng với các giá trị độ dài, các giá trị này cũng có thể là tự động, cho phép bản track phát triển / kéo dài dựa trên kích thước của nội dung.
Trong ví dụ này, theo dõi hàng đầu tiên được đặt để có chiều cao tối thiểu là 100px, nhưng kích thước tự động tối đa của nó sẽ cho phép theo dõi hàng phát triển nội dung cao hơn 100px.
Theo dõi cột đầu tiên có kích thước tối thiểu là tự động, nhưng kích thước tối đa là 50% sẽ ngăn không cho nó rộng hơn 50% chiều rộng vùng chứa gird.