CSS GRID CĂN BẢN

Có rất nhiều cách để căn chỉnh layout trong css và css Grid là 1 trong số đó. Grid xuất hiện trong những UI Kit nổi tiếng như Bootstrap,… tuy nhiên mãi đến gần đây mới có thuộc tính chính thức trên CSS.Hãy cùng khám phá xem css Grid có những điểm đặc biệt gì.

I. Grid Container

Để sử dụng css Grid , bạn cần tạo 1 grid container cho các item của bạn bằng cú pháp:

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
.wrapper {
  display: grid;
}

Tất cả các thẻ con của grid container sẽ thành grid items

II. Cách Chia cột và hàng

Để kiểm soát được các dòng và các hàng trong Grid, chúng ta dùng thuộc tính  grid-template-columns và grid-template-rows . Các thuộc tính nãy sẽ xác định khoảng cách giữa 2 dòng bất kỳ trong grid

  • grid-template-columns: là số cột và chiều rộng của các cột đó từ trái qua phải
  • grid-template-rows : là số dòng và chiều cao của các dòng đó từ trên xuống dưới

Ví dụ để tạo layout 4 cột 3 hàng thì

.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 200px 200px 200px
}

Ở ví dụ trên grid-template-columns chúng ta xác định 4 giá trị và giá trị là 200px => 4 cột , mỗi cột trộng 200px

grid-template-rows chúng ta xác định 3 giá trị và giá trị là 200px => 3 dòng , mỗi dòng cao 200px

III. Khoảng cách giữa cách cột và cách hàng

Grid có thuộc tính xác định khoảng cách giữa các cột là column-gap và khoảng cách giữa các hàng là row-gap

Để căn chỉnh chúng , ta sử dụng grid-column-gap và grid-row-gap hoặc viết rút gọn thành grid-gap với 2 giá trị , giá trị đầu là column, row

Ngoài ra bạn có thể chỉnh size cho từng item theo chiều ngang ( column ) hoặc chiều dọc ( row) bằng thuộc tính :

grid-column-start
grid-column-end
grid-row-start
grid-row-end

thuộc tính nhận nhận giá trị là các column line và row line.
Column line là các đường nằm giữa các cột
Row line là các đường nằm giữa các hàng
Cả 2 được đếm bắt đầu từ 0

Kết quả hình ảnh cho column line row line grid

Ví dụ để grid item màu đỏ dài từ column line 1 đến column line 4 chúng ta dùng:

.item1 {
background: red;
grid-column-start: 1;
grid-column-end: 4;
}

Kết quả ta được :

Trên đây là sơ lược về css Grid, nhìn chung Grid cung cấp cho chúng ta các thuộc tính để thay đổi layout theo 2 chiều : ngang và dọc , hữu ích hơn so với Flex khi chỉ có 1 direction.

Link demo : https://codepen.io/anon/pen/rEzagX

Leave a Reply

Your email address will not be published. Required fields are marked *