Làm Layout Bằng Flexbox và Grid Trong CSS3 (Phần 2)

Làm Layout Bằng Flexbox và Grid Trong CSS3 (Phần 2)

Xin chào các bạn, mình đã trở lại rồi đây. Trong phần 1 mình đã giới thiệu cho các bạn về CSS Flexbox - một trong những hệ thống bố cục 1 chiều được sử dụng ở hầu như các trang Web hiện tại. Ở phần 2 này, mình tiếp tục chia sẻ cho các bạn một hệ thống bố cục dựa trên lưới 2 chiều với cả chiều dọc và chiều ngang, đó là CSS Grid. Chúng ta bắt đầu tìm hiểu nào !!!

Thuộc tính cơ bản của CSS Flexbox và CSS Grid

2. CSS Grid

CSS Grid là một hệ thống bố cục dựa trên lưới 2 chiều nhằm mục đích không làm gì khác hơn là thay đổi hoàn toàn cách chúng ta thiết kế giao diện người dùng dựa trên lưới.

Bố cục Grid phù hợp để thiết kế các website có độ phức tạp cao.

CSS Grid giới thiệu thuộc tính display với 2 giá trị là grid và inline-grid

Grid Container :

.grid-container {
     display: grid / inline-grid;
}

     

  • display : grid tạo lưới cấp khối (block level).
  • display : inline-grid tạo ra một lưới cấp độ nội dòng (inline level).

2.1 Các thuộc tính cho thành phần cha (grid container)

grid-template-columns và grid-template-rows : chia grid thành các cột các hàng.

grid-template-columns : tương ứng với số cột, các giá trị sẽ tương ứng với chiều rộng của các cột lần lượt từ trái sáng phải.

grid-template-rows : tương ứng với số hàng, các giá trị sẽ tương ứng với chiều cao của các hàng lần lượt từ trên xuống dưới.

grid-template-columns: <track-size> ...;

grid-template-rows: <track-size> ...;

Example : tạo layout dạng lưới, chia layout thành 5 cột và 3 hàng tương ứng với chiều rộng và chiều cao chứa trong 2 thuộc tính trên.

grid-template-columns: [first] 60px [line2] 70px [line3] auto [col4-start] 60px [five] 70px [end];

grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];

[first], [line2], [line3], ... : đây là các tên chú thích cho từng hàng từng cột, có thể sử dụng hoặc không sử dụng. Lưu ý cú pháp đặt tên sẽ là [tên muốn đặt cho cột hoặc hàng]

Ngoài ra, chúng ta có thể dùng phương thức repeat (số cột trên dòng, độ rộng cột) để chia các cột và các hàng trên grid. Mình ví dụ grid-template-columns: repeat(4, 25%) nghĩa là grid được chia làm 4 cột và mỗi cột tương ứng 25% tương tự với các viết grid-template-columns : 25% 25% 25% 25%

grid-template-areas : tạo bố cục layout một cách nhanh chóng, đi vào ví dụ luôn nhé.

Giả sử bạn muốn thiết kế layout như sau :

Trong layout trên chia làm 4 cột và 3 hàng : header chiếm chọn hàng 1, content chiếm 2 phần, sidebar chiếm 1 phần, footer chiếm chọn hàng cuối còn 1 phần nằm ở giữa content và sidebar. Vậy là chúng ta có 4 khối : header, content, sidebar và footer.

<div class="grid-container">

  <div class="item-header">header</div>

  <div class="item-content">content</div>

  <div class="item-sidebar">sidebar</div> 

  <div class="item-footer">footer</div>

</div>

Tạo class cho item-header với thuộc tính grid-area : header;

Tạo class cho item-content với thuộc tính grid-area : content;

Tạo class cho item-sidebar với thuộc tính grid-area : sidebar;

Tạo class cho item-footer với thuộc tính grid-area : footer;

Sau đó chúng ta thiết lập thuộc tính grid-template-areas cho grid-container như sau :

grid-template-areas : "header header header header"

 "content content . sidebar"

 "footer footer footer footer"

Mình giải thích qua nhé : ở hàng đầu tiên item-header sẽ chiếm 4 cột do đó sẽ là toàn bộ hàng đầu tiên sẽ là 4 giá trị header, tương tự với footer. Ở  hàng thứ 2, item-content sẽ chiếm 2 cột nên sẽ là 2 giá trị content. Dấu chấm là bỏ trống lấy 2 phần. Ở item-sidebar sẽ lấy 1 cột nên giá trị là 1 sidebar. Theo mình nghĩ thì việc tạo layout theo areas cũng khá đơn giản và nhanh chóng.

  • grid-template : là một shorthand(gộp chung) cho 2 thuộc tính grid-template-columns và grid-template-rows.
  • col-gap, row-gap, grid-column-gap, grid-row-gap : thiết lập kích thước cho các đường lưới.
    • grid-column-gap và grid-row-gap : đây là 2 thuộc tính cũ
    • col-gap và row-gap là 2 thuộc tính mới được sử dụng hiện tại

.container {

  /* standard */

  column-gap: <line-size>;

  row-gap: <line-size>;

 

  /* old */

  grid-column-gap: <line-size>;

  grid-row-gap: <line-size>;

}

  • justify-items : căn chỉnh nội dung bên trong một mục lưới dọc theo trục hàng.
    • justify-items : start | end | center | stretch

  • justify-content : thuộc tính này căn chỉnh lưới dọc theo trục hàng
    • justify-content : start | end | center | stretch | space-around | spacebetween | space-evenly

2.2. Các thuộc tính cho thành phần con (grid item)

grid-column-start, grid-column-end, grid-row-start, grid-row-end : xác định vị trí bắt đầu và kết thúc của item trong grid.

Example : item1 bắt đầu cột 1 và kết thúc ở cột 4, item2 bắt đầu ở cột 1 và kết thúc ở cột 2, item3 bắt đầu ở cột 1 và kết thúc ở cột 3 :

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

item2 {
     grid-column-start: 1;
     grid-column-end: 2;
}

item3 {
     grid-column-start: 1;
     grid-column-end: 3;
}

grid-column, grid-row : là shorthand(gộp chung) của các thuộc tính grid-column-start, grid-column-end, grid-row-start, grid-row-end.

grid-area : định nghĩa tên cho item chứa trong container. Tham chiếu tới thuộc tính grid-template-areas trong grid container

  • Thuộc tính này mình đã đề cập đến ở mục grid-template-areas
  • .item {

grid-area : <tên của item> <ví dụ : header>

}

  • justify-self : Căn chỉnh nội dung bên trong một mục lưới dọc theo trục hàng.

.item {

     justify-self : start | end | center | stretch;

}

Tạm kết

Vậy là mình đã kết thúc bài viết chia sẻ vể cách thiết kế layout sử dụng CSS Flexbox và CSS Grid. Hi vọng bài viết sẽ giúp các bạn trong quá trình tìm hiểu và làm việc. 

Cảm ơn mọi người đã xem bài viết của mình !!!

Tài liệu tham khảo:css-tricks.com