Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

CSS Grid Layout: Sử dụng các Grid Area

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Fluid Columns and Better Gutters
CSS Grid Layout: Going Responsive With auto-fill and minmax()

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Một điều mà chúng ta đã đề cập, nhưng vẫn chưa bao quát một cách đúng đắn trong loạt bài viết này đó là grid areas. Đến đây các phần tử trong grid của chúng ta đã được đặt bên trong một grid cell (ô), nhưng chúng ta có tạo ra các layout hữu dụng hơn bằng cách phá vỡ các ranh giới đó. Hãy xem!

Định nghĩa các Grid Area

Đây là grid mà chúng ta đã làm việc với nó: chín phần tử grid tự động đặt bên trong ba cột bằng nhau, ba dòng bằng nhau, được chia bởi các gutter rộng 20px.

Hiện tại các phần tử của chúng ta chỉ có màu sắc, nhưng hãy quay lại với những gì mà chúng ta đã học trong bài hướng dẫn trước và thêm vào vài luật grid-columngrid-row, cùng với vài thứ phụ trợ khác:

Trong câu lệnh rút ngắn này grid-column chúng ta sử dụng một cách hiệu quả grid-column-startgrid-column-end, nói với phần tử rằng hãy bắt đầu tại grid line (đường kẻ) 1 và kết thúc tại grid line 3.

grid lines
Các grid line 1 và 3

Dưới đây là những gì mà nó cho chúng ta; phần tử đầu tiên bây giờ trải dài xuyên suốt hai ô, đẩy các phần tử khác về bên phải và xuống dưới tuỳ thuộc vào thuật toán tự động sắp xếp.

Cũng có thể thực hiện tương tự với các cột, mà sẽ cho chúng ta một vùng rộng hơn ở góc trên bên trái của grid của chúng ta.

Các ô liền nhau

Sử dụng cú pháp dễ dàng hơn chúng ta có thể chuyển từ khoá grid-column-end thành span. Với span chúng ta không bị ràng buộc việc khai báo điểm cuối của area, thay vào đó định nghĩa bao nhiêu track mà phần tử sẽ trải rộng ra.

Điều này cho chúng ta cùng một kết quả, nhưng nếu chúng ta đã thay đổi vị trí mà chúng ta muốn phần tử bắt đầu thì chúng ta không còn bắt buộc phải thay đổi điểm cuối.

Trong phần minh hoạ dưới đây bạn có thể thấy chúng ta đã làm rỗng layout bằng cách xoá bốn phần tử. Chúng ta đã định nghĩa vị trí trong hai phần tử của chúng ta: cái đầu tiên trải rộng lên hai cột và hai dòng, trong khi cái thứ tư bắt đầu trên cột 3, dòng 2, và trải rộng xuống hai track:

Các phần tử còn lại lấp vào khoảng không gian còn trống một cách tự động. Điều này nhấn mạnh cách mà một grid layout không cần phải phản ánh thứ tự đầu vào của các thành phần.

Lưu ý: có nhiều trường hợp trong đó thứ tự ban đầu cần phải phản ánh sự trình bày-đừng quên về tính truy xuất.

Các area (khu vực) được đặt tên

Sử dụng các phương thức đánh số chúng ta đã mô tả khá tốt, nhưng Grid Template Areas có thểm làm cho việc định nghĩa các layout càng trực quan hơn.

Đặc biệt chúng cho phép chúng ta đặt tên các area trong grid. Với những area được đặt tên đó, chúng ta có thể tham chiếu chúng (thay vì số dòng) tới vị trí của các phần tử của chúng ta. Hãy tập trung vào phần minh hoạ hiện tại và sử dụng nó để tạo một page layout (kiểu dàn trang) cơ bản cho chính chúng ta:

  • header (phần đầu)
  • main content (phần nội dung chính)
  • sidebar (phần bên cạnh nội dung chính)
  • footer (phần chân)

Chúng ta định nghĩa những area trong kho chứa grid của chúng ta, chúng ta vẽ chúng ra hầu như giống với những gì mà chúng ta đã hình dung:

Định vị trí các phần tử

Bây giờ chúng ta chuyển sự chú ý của chúng ta tới các phần tử, bỏ đi các luật grid-columngrid-row thay bằng grid-area:

Phần tử đầu tiên được đặt trong phần header, trải rộng ra trên tất cả ba cột của header. Phần tử thứ hai của chúng ta được chuyển cho khu vực main content, cái thứ ba trở thành sidebar của chúng ta, và cái thứ tư là footer của chúng ta. Và những cái này không cần phải theo thứ tự ban đầu, .item-4 có thể dễ dàng được đặt trong phần header.

Như bạn thấy, điều này làm cho việc dàn trang trở nên dễ dàng hơn. Thực tế, trong khi chúng ta trình bày grid của chúng ta, tại sao không làm cho nó thú vị hơn nữa và sử dụng các biểu tượng emoji?!

Các Grid Area lồng nhau

Một trang web nhất định sẽ chứa tất cả các kiểu thành phần được lồng vào nhau, vì vậy hãy xem cách mà điều đó làm việc với Grid.

Khi chúng ta định nghĩa một kho chứa grid display: grid; chỉ có những anh em trực tiếp của nó trở thành các phần tử của grid. Nội dung mà chúng ta thêm vào trong những thành phần con này sẽ hoàn toàn không có tác dụng bở Grid, trừ khi chúng ta khai báo một cách cụ thể.

Trong ví dụ của chúng ta, chúng ta sẽ thêm .item-5, .item-6, và .item-7, lồng chúng vào trong .item-2.

Do đó chúng ta cần phải định nghĩa .item-2 của chúng ta như là một kho chứa grid, thiết lập grid của nó với hai cột và hai dòng.

Chúng ta có thể sử dụng các tên "header", "article", và "sidebar" tại đây một lần nữa; không có sự rắc rối, bởi vì mọi thứ nằm trong ngữ cảnh. Những cái grid area này chỉ áp dụng với grid bên trong .item-2.

Kết luận

Tổng hợp những gì chúng ta đã nói:

  1. grid-column cung cấp cho chúng ta một cách rút gọn việc định nghĩa vị trí mà một phần tử bắt đầu và kết thúc.
  2. Chúng ta có thể sử dụng từ khoá span để làm cho các luật của chúng ta linh hoạt hơn.
  3. grid-template-areas cho chúng ta sức mạnh để đặt tên các area grid của chúng ta (ngay cả việc sử dụng các biểu tượng emoji nếu hứng thú).
  4. Chúng ta có thể lồng các grid vào nhau bằng cách định nghĩa các phần tử của grid là display: grid; và theo cách thức tương tự.

Một lần nữa chúng ta đã học một số khía cạnh hữu ích của CSS Grid Layout, và chúng ta đang ngày càng gần hơn với các trường hợp sử dụng thực tế! Trong bài hướng dẫn tiếp theo chúng ta sẽ đi sâu hơn và xem nó tương tự với kiểu thiết kế đáp ứng (responsive design) như thế nào.

Các nguồn tài liệu hữu ích

  • Liệu tôi đã nhắc tới cái này chưa? Hãy theo dõi @rachelandrew
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.