Tìm hiểu về Grid Layout CSS

by · Published · Updated

Trong bài viết này, mình sẽ cùng các bạn hiểu về Grid Layout.

Giả sử yêu cầu phác thảo một layout như hình, nên sắp xếp các khối div theo thứ tự từ trên xuống dưới, từ trái qua phải.

Trong đó, số row được đánh số từ 1->5, số column được đánh số từ 1->4

 

Áp dụng nguyên tắc như trên, ta có code HTML như sau:

Code CSS:
Trong đó:
display: grid; khi muốn sử dụng grid layout
grid-template-rows: 100px 0.5fr 0.5fr 100px;
css cho từng row. Ta có 4 hàng, trong đó hàng 1 và 4 có chiều cao cố định 100px(áp dụng cho phần header và footer trong một trang web)
Hàng 2, 3 có giá trị 0.5fr tức là lấy tổng chiều cao trừ đi 2 phần title và header, và mỗi hàng sẽ chiếm 50% phần còn lại đó.
grid-template-columns: 200px 1fr 200px;
Css cho từng cột theo chiều từ trái sang phải. Từ thiết kế ta thấy có 3 cột,
cột 1,3 có chiều cao cố định, phần còn lại dành toàn bộ cho cột 2.
Css cho từng div con
title
Chú ý 2 thuộc tính grid-row và grid-column
grid-row: 1 / 2; tức div title sẽ bắt đầu từ dòng 1 và kết thúc ở dòng 2
grid-column: 1 / 4;  div title sẽ bắt đầu từ cột 1 và kết thúc ở  cột 4
tương tự với các div con khác ta đươc:
Tham khảo code đâỳ đủ tại:

You may also like...