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

5215

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.

CSS Grid Layout support since March 2017 on CanIUse

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.

Enabling Experimental Web Platform flag in Opera

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.

4 Column Layout

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:

4 columns, 2 rows

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:

Xem bản demo tại đây

Hãy là những người đầu tiên đăng ký vé Early Bird từ 01/04 – 15/04 với giá ưu đãi chỉ còn 150k

Grid Layout Module Concepts

Giờ thì bạn đã được xem qua ví dụ đơn giản, tiếp theo là một số khái niệm mới sẽ giúp bạn hiểu hơn về Grid Layout.

Grid Item

Grid items là phần tử con của grid container. Trong ví dụ trên, phần tử .tweets, và .replies  sẽ hội đủ điệu kiện làm grid items.

Grid Lines
Mockup of Grid Lines in Grid Layout Module

Grid Line là một dòng xuất hiện ở hai bên một cột hoặc một hàng. Có hai bộ grid line: Một bộ xác định cột, và một bộ xác định hàng.

Từ screenshot trên (thể hiện ví dụ đầu tiên), tôi đã tạo bốn cột với 1fr cho mỗi cột, từ đó ta có 5 dòng kẻ dọc. Tôi còn tạo thêm một hàng, như vậy ta có hai dòng kẻ ngang.

Hãy xem thử cách đặt một grid item trong grid container nhé.

Đặt Items bằng cách dùng Line Number

Bạn có thể tìm đến một số dòng chính xác với tính chất grid-column-start và grid-column-end.

Nhìn vào ví dụ trước, đây là cách trình duyệt mặc định đặt các phần tử cho chúng ta:

Nhìn vạo đoạn code cho cột .twee , mỗi 3 dòng trong CSS sẽ có tác dụng:

  1. Đặt vị trí phần tử con bắt đầu từ dòng kẻ dọc đầu tiên bên trái.
  2. Kết thúc vị trí của phần tử tại dòng kẻ dọc thứ hai.
  3. Đặt phần tử trong cả hàng

Bạn có thể thay đổi những vị trí này bằng cách thay đổi thứ tự phần tử với các vị trí khác nhau, vậy thứ tự của các phần tử sẽ là: .search, .replies, .messages, và .tweets.

Changing the order of the columns with Grid Layout

Và ta có thể thực hiện như sau:

Chúng ta cũng có thể sử dụng shorthand property grid-column để thiết đặt các dòng bắt đầu và kết thúc trong một dòng:

Xem thử bản demo tại đây

Việc này đã thay đổi cấu trúc layout chỉ với CSS, trong khi markup vẫn giữ nguyên không thay đổi. Đây là một ích lợi rất lớn khi sử dụng Grid Layout Module. Chúng ta có thể sắp xếp lại layout của các phần tử độc lập khỏi thứ tự gốc của chúng, từ đó đạt được bất kỳ layout mong muốn nào cho các kích thước và góc xoay màn hình khác nhau.

Đặt Items bằng cách dùng Named Areas (khu vực được đặt tên)

Một grid area là không gian logic dùng để dàn một hoặc nhiều grid item. Chúng ta có thể đặt tên rõ ràng một grid area bằng tính chất grid-template-areas, sau đó chúng ta có thể đặt một grid item vào một khu vực cụ thể bằng tính chất grid-area.

Để làm rõ khái niệm này hơn, hay làm lại ví dụ 4 cột với cột search lên trước:

Trong dòng cuối cùng, chúng ta sẽ chia grid container thành bốn grid areas có đặt tên, mỗi tên cho một cột. Bước tiếp theo là đặt một grid item vào một khu vực có đặt tên:

Xem bản demo ở đây

Slack Example

Vậy nếu ta dùng Grid Layout Module để thực hiện một ví dụ phức tạp hơn thì sao, ví dụ, tạo building block của layout Slack. Vì chúng ta đang nói về layout, ta sẽ trừu tượng hóa và đơn giản hóa thiết kế Slack đến các building block được thể hiện trong grid. Đại loại như:

The Slack Layout

Từ layout này chúng ta sẽ tạo ba cột dọc, và ba hàng ngang, và chúng ta có thể hình ảnh hóa bằng grid line như sau:

Mockup of the grid lines in the Slack layout

Dưới đây là HTML:

Và CSS:

Tại đây tôi đang sử dụng tính chất grid-template-columns để tạo ba cột 100px, 250px, và cột thứ ba chiếm không gian trống còn lại. Dòng cuối cùng tạo ba hàng: hàng thứ nhất và thứ ba với chiều cao tự động trong khi dòng giữa chiến không gian trống còn lại.

Phần CSS còn lại sẽ trông như sau:

Xem bản demo tại đây

Chúng ta cũng có thể tạo slack layout bằng named areas, như bạn thấy trong demo sau.

Grid Layout Module vs Flexbox

Chắc có nhiều quen dùng Flexbox sẽ thắc mắc: Khi nào nên dùng Flexbox và khi nào nên dùng Grid Layout?

Dưới đây là cách giải thích rất hay của Tab Atkins:

Flexbox thích hợp cho nhiều layout, và nhiều phần tử “page component”, vì đa phần các phần tử này cơ bản là đi theo hàng. Grid thì lại phù hợp cho page layout tổng quan, và cho các page component phức tạp không theo hàng trong thiết kế của chúng.

Cả hai có thể được kết hợp ngẫu nhiên, nên một khi cả hai đã được hỗ trợ rộng rãi, tôi tin rằng hầu hết các trang web sẽ có cả grid ngoài cho layout tổng quan, hỗn hợp flexbox đã next và grid cho các component của page, và cuối cùng là block/inline/table layout ở phần “lá” của page, nơi mà text và content sinh sống.

Hơn nữa, Rachel Andrew còn nói:

Grid layout cho cấu trúc main page của cột và hàng.

Flexbox cho điều hướng, phần tử UI, bất cứ thứ gì bạn có thể tuyết tính hóa được.

Một số tài nguyên khác về CSS Grid Layout Module

Lời kết

Như bạn đã thấy, CSS Grid Layout Module là một công cụ vô cùng mạnh mẽ bởi khả năng giúp bạn code ngắn gọn và thay đổi trật tự layout mà không phải động đến markup. Những tính nẳng có thể giúp chúng ta thay đổi vĩnh viễn cách tạo layout cho web.

Techtalk via Sitepoint

CHIA SẺ