Tiếp đà bài viết lần trước, hôm nay mình tiếp tục một bài viết nữa về CSS. Đó là về Flexbox và Grid trong CSS.
Bài viết lần này sẽ điểm qua các nội dung sau:

Giới thiệu về Flexbox và Grid
The battle begins
Một số nguồn tài liệu để học về Flexbox và Grid

1. Giới thiệu chung về Flexbox và Grid

Flexbox và Grid là 2 layout module của CSS trở nên phổ dụng gần đây. Cả 2 module này đều cho phép lập trình viên có thể tạo ra những layout phức tạp cho trang web mà đáng ra trước đây những layout kiểu này cần phải có những CSS hacks cũng như sự giúp đỡ của Javascript mới có thể thực hiện được.
Flexbox được thiết kế như một one-dimensional layout model. Flexbox giúp phân bố không gian xung quanh các item trong interface cũng như có alignment capabilities rất tốt.
Grid layout thì mạnh trong việc phân chia page thành các phần hay định nghĩa mối liên quan về size, position và layer giữa các phần của trang.
Flexbox và Grid có chung những điểm giống nhau và có nhiều layout có thể giải quyết bằng cả Flexbox và Grid. Câu hỏi đặt ra chính là khi nào dùng cái nào đang trở thành một trong những chủ đề hot nhất trong cộng đồng CSS.

2. The battle begins

Phần tiếp theo sẽ trình bày những điểm khác biệt giữa Flexbox và Grid để chúng ta có thể quyết định cái nào phù hợp với project hiện tại của mình:

One dimenstion vs Two dimension

Flexbox được tạo ra cho layout 1 chiều còn Grid được tạo ra cho layout 2 chiều

Khi bạn cần layout các element theo 1 chiều (ngang hoặc dọc) thì bạn có thể sử dụng Flexbox. Ví dụ bạn muốn có 3 button Home, Search và Logout trên 1 dòng của header.

Khi bạn cần tạo layout 2 chiều với hàng và cột, thì Grid là một lựa chọn thích hợp hơn rất nhiều:

Và bạn hoàn toàn có thể kết hợp cả Grid và Flexbox. Với ví dụ trên, bạn có thể dùng Grid để tạo layout cho toàn trang với các phần như Header, Menu, Content, Footer. Và bên trong mỗi phần như Header chẳng hạn, bạn có thể dùng Flexbox để layout các items trong đó.

Content first vs Layout first

Một điểm khác biệt chính giữa Flexbox và Grid nữa đó là: Flexbox sẽ hướng đến content còn Grid sẽ hướng đến layout. Chúng ta sẽ cũng xét ví dụ sau để làm rõ hơn vấn đề này
Giả sử chúng ta cần làm 1 layout cho header như sau:

Để bắt đầu, ở HTML chúng ta có như sau:

 <header>
  <span>HOME</span>
  <span>SEARCH</span>
  <span>LOGOUT</span>
 </header>

Khi đó ta thấy Layout sẽ gồm 3 < span> chồng lên nhau như sau:

HOME
SEARCH
LOGOUT

Tiếp theo, ta sẽ dùng Flexbox để layout cho header

header{
 display: flex;
}

Khi đó các item trong header sẽ sắp xếp lại nằm trên cùng 1 hàng.
Tiếp theo, ta cần phần tử LOGOUT nằm ở cuối dòng bên phải thì ta làm như sau:

header > div:nth-child(3) {
 margin-left: auto;
}

Khi đó ta được kết quả là:

Như ta thấy, với Flexbox thì chúng ta để các item tự quyết định chúng sẽ được đặt ở đâu trong layout. Đây chính là điểm khác biệt giữa Grid và Flexbox. Tiếp theo, chúng ta sẽ hiện thực lại layout header này bằng việc sử dụng Grid
Ta sẽ chia Header thành 1 Grid với 10 cột, mỗi cột có độ rộng là 1 đơn vị tỉ lệ (1fr)

header {
 display: grid;
 grid-template-columns: repeat(10, 1fr)
}

Ta cũng sẽ được 1 header với các item cùng nằm trên 1 hàng. Tuy nhiên khi inspect vào thì ta thấy rằng header của chúng ta có 10 cell và các item của chúng ta nằm trong mỗi cell đó

Tiếp theo, ta muốn LOGOUT nằm ở bên phải thì ta sẽ cần set vị trí của LOGOUT ở cell tận cùng bên phải (cột thứ 10) của Grid.

header > div:nth-child(3) {
 grid-column: 10;
}

Và kết quả:

Như vậy có thể thấy, với cách tiếp cận layout first của Grid, đầu tiên ta sẽ định nghĩa layout của trước, tiếp theo là set width cho từng cột và cuối cùng là đặt content vào những grid cell tương ứng.
Nhìn vào ví dụ này ta thấy, ta không thể set margin-left: auto cho LOGOUT được vì nó đã được đặt vào 1 cell cố định trên layout. Muốn dời đến vị trí khác, buộc lòng ta phải thay đổi grid cell khác.

3. Một số nguồn tài liệu để học về Flexbox và Grid

Để mọi người nắm rõ hơn về Flexbox và Grid, mình xin giới thiệu qua thêm một số nguồn tài liệu để học về 2 cái này

Freecodecamp:

Freecodecamp là một website giúp bạn học những kiến thức căn bản về lập trình web như HTML, CSS, Javascript, Responsive Design và CSS Flexbox và Grid cũng ko ngoại lệ. Các bạn có thể vào đây để học về Flexbox và Grid, sau đó có thể làm các bài tập để áp dụng kiến thức vừa học.

W3Schools:

Không phải nói nhiều về trang này, một trong những resource rất đầy đủ và hữu ích cho web developer.
Các bạn có thể học Flexbox và Grid tại W3Schools tại đây:

Flexbox: https://www.w3schools.com/css/css3_flexbox.asp
Grid: https://www.w3schools.com/css/css_grid.asp

Kết:

Flexbox và Grid hiện đang trở nên rất phổ biến trong việc layout web. Hi vọng qua bài viết này các bạn có thể hiểu thêm về 2 khái niệm này, cũng như có được góc nhìn tốt hơn trong việc áp dụng các layout module này vào dự án của mình sao cho hợp lý nhất.
Nếu các bạn thấy bài viết này hay và hữu ích, hãy chia sẻ cho mọi người cùng biết. Nếu có bất kì ý kiến đóng góp nào, đừng ngần ngại để lại comment bên dưới để cùng thảo luận nhé!

Julian Dong

Đại chiến CSS: Flexbox vs Grid