Giới thiệu về CSS Grid Layout Module

Khi ứng dụng web ngày càng trở nên phức tạp hơn, chúng ta cần có cách tự nhiên hơn nữa để dễ dàng thực hiện layout cao cấp. Và như vậy, với CSS Grid Layout Module, ta sẽ có một giải pháp mới để tạo layout, nhanh và hiệu quả hơn nữa.

Trong bài giới thiệ, ta sẽ được làm quen với tính năng CSS còn khá mới này, tìm hiểu các dạng trình duyệt được hỗ trợ, kèm theo một số ví dụ về cách hoạt động của C

CSS Grid Layout Module là gì?

Ý tưởng chính đằng sau Grid Layout là chia web page thành nhiều cột và hàng, cùng với khả năng chỉ định vị trí và kích thước của các building block element dựa trên kích thước, vị trí, và layer của hàng và cột ta đã tạo.

Lưới ô cũng mang đến cách thức thay đổi vị trí của phần tử rất dễ dàng với chỉ CSS mà không thay đổi đến HTML. Phương thức mới này có thể được sử dụng với media query để thay đổi layout tại các breakpoint khác.

Hỗ trợ trình duyệt

Trước khi tìm hiểu sâu về Grid Layout, các bạn hãy xem thử trình duyệt của mình có được hỗ trợ hay không, và cách kích hoạt tính này trên các trình duyệt hiện nay.

Chrome và Firefox

Tin vui là từ tháng ba năm 2017 cả trình duyệt Chrome và Firefox đều mặc định kích hoạt sẵn CSS Grid Layout.

Bởi vậy, chúng tôi khuyến khích sử dụng Chrome hoặc Firefox với các ví dụ trong bài viết này.

Internet Explorer

Một trong những môi trường đầu tiên cho Grid Layout được phát triển bởi Microsoft, và IE10 bắt đầu xuất hiện tiền tố -ms. Nếu bạn nhìn qua support on Can I Use, bạn có thể thấy rằng cả IE11 và Edge cũng có hỗ trợ Grid Layout.

Opera

Để kích hoạt Grid Layout trong Opera, hãy điều hướng đến chrome://flags hoặc opera://flags (cả hai đều hiệu quả với Opera) bằng thanh địa chỉ của trình duyệt, và tìm đến flag Enable experimental Web Platform features. Sau khi đã kích hoạt, bạn sẽ được yêu cầu phải relauch trình duyệt.

Grid Layout Polyfill

Polyfill cũng mang đến lựa chọn tích hợp Grid Module cho nhiều trình duyệt hiện nay.

A Grid Layout Example

Hãy bắt đầu với một ví dụ nói lên sức mạnh của Grid Layout, và sau đó tôi sẽ giải thích một vài khái niệm mới chi tiết hơn nữa.

Hãy tưởng tượng bạn muốn tạo ứng dụng Twitter với bố cục bốn cột có chiều cao tối đa (Tweets, Replies, Search, và Messages), chúng ta sẽ có phân bố trừu tượng tương tự như bên dưới.

Và đây là HTML:

Sau đó ta sẽ lồng ghép thêm CSS vào container element .app-layout:

Xem demo ở đây nhé

Dưới đây là phần giải thích cho những gì chúng ta đã làm ở CSS trước đó:

1. Set the display property to grid.
2. Đặt tính chất hiển thị về grid.
3. Chia container element thành bốn cọt, một cột là 1fr (một fraction) của không gian trống trong grid container.
4. Tạo một hàng và set độ cao thành 100vh (full viewport height).

Như bạn thấy đấy, Grid Layout Module thêm một giá trị mới grid vào tính chất display. Giá trị grid chịu trách nhiệm thiết đặt phần tử .app-layout thành grid container, dùng để thành lập một grid formatting context mới cho nội dụng của nó. Tính chất này cần thiết để bắt đầu sử dụng Grid Layout.

Tính chất grid-template-columns chỉ định độ rộng của mỗi ô cột trong Grid, và trong trường hợp của chúng ta, container .app-layout được chia thành bốn cột; mỗi cột là 1fr (25%) của không gian dùng được.

Các grid-template-rows chỉ ra chiều cao của mỗi ô hàng, và trong ví dụ của chúng ta, ta sẽ chỉ tạo một hàng 100vh.

Một layout với hai cột và hai hàng sẽ trông như sau:

Và chúng ta sẽ dùng CSS sau:

Xem bản demo tại đây

Chúng ta cũng có thể đạt được kết quả như ví dụ trên trên các màn hình nhỏ, bằng cách gói code trong một media query. Từ đó, mở ra cơ hội to lớn cho chúng ta tùy biến layout khác đi trong các viewport khác nhau. Ví dụ, chúng ta có thể tạo layout trước đó chỉ trên viewport dưới 1024px như sau: