FLASH SALE! Up to 40% off on unlimited courses, tutorials and creative asset downloads SAVE NOW
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

Chỉ dẫn nhanh: Đặt tên các CSS Grid Line của bạn, khi cần

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
Understanding the CSS Grid “Auto-Placement Algorithm”
How to Use Implicit Track Sizing on Your CSS Grid

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

Trong bất kỳ CSS Grid nào, mỗi line (đường kẻ) có một số thứ tự mà chúng ta có thể tham chiếu đến để đặt các phần tử của Grid. Tuy nhiên, chúng ta còn có thể đặt tên cho mỗi Grid Line này, giúp dễ làm việc và duy trì các Grid Layout (Bố cục ô lưới) của chúng ta. Giờ chúng ta hãy cùng tìm hiểu!

Grid đang đến

Phản hồi nhiều nhất về bài hướng dẫn Grid là "nhưng mà khi nào tôi có thể sử dụng điều này?" và nó là một câu hỏi hợp lý. Thực tế là: Grid đang đến, và nó sẽ ở đó sớm thôi.

"CSS Grid sẽ được hỗ trợ mặc định ở trong Chrome và Firefox vào tháng Ba năm 2017." — Eric Meyer

Nếu bạn vẫn chưa tìm hiểu nó, thì đây là lúc thích hợp!

Số thứ tự Grid Line

Khi chúng ta định nghĩa một Grid, mỗi line tạo ra một số thứ tự.

Lưu ý: Trừ khi Layout được thiết lập với direction: rtl;, thì những con số này sẽ bắt đầu từ trên xuống dưới, trái qua phải của Grid.

Chúng ta có thể tham chiếu đến những số này để đặt các phần tử vào Grid:

Trong ví dụ này phần tử .item được đặt bắt đầu trên column line 2 (cột 2), và row line 3 (dòng 3):

Đặt rõ tên Grid Line

Với các Grid phức tạp hơn, bạn có thể tưởng tượng rằng tham chiếu đến tất cả mọi thứ bằng con số có thể có một chút rắc rối. Vì lý do này, mô-đun Grid cho phép chúng ta định rõ tên các line của chúng ta khi chúng ta định nghĩa Grid Column (Cột) và Row (Hàng).

Hãy sử dụng một ví dụ giống như cái mà chúng ta đã sử dụng trong suốt loạt bài này. Dưới đây là định nghĩa Grid 3 x 3 cơ bản của chúng ta:

Bây giờ chúng ta có thể bao các giá trị column và row với tên của line (bất cứ điều gì mà chúng ta muốn), bằng cách sử dụng dấu ngoặc vuông:

Bây giờ chúng ta có thể đặt các phần tử với tên gọi, thay vì con số:

Một số gợi ý:

  • Những tên này có thể phù hợp với nhu cầu mô tả riêng của bạn, vì vậy suy nghĩ một cách logic về những gì sẽ giúp bạn nhận ra và nhớ các khu vực của Grid.
  • Số thứ tự của line ban đầu vẫn còn tác dụng, do đó, bạn vẫn có thể sử dụng chúng.
  • Bạn có thể khai báo nhiều tên cho một dòng, ví dụ: [main-end footer-start row-5] vv.
  • Thậm chí nếu bạn đặt tên các Grid Line của bạn, bạn không bắt buộc phải sử dụng chúng, vì vậy nên hình thành một thói quen "chỉ khi cần thiết".

Tên ngầm của Grid Line

Khi chúng ta cố tình làm những thứ, như đặt tên Grid Line, điều đó nói lên rằng nó là rõ ràng. Khi một cái gì đó là ẩn ý, nói một cách gián tiếp, nó được gọi là ngầm. Chúng ta đã tìm hiểu việc đặt tên một cách rõ ràng các Grid Line, nhưng cũng có trường hợp nơi các Line được đặt tên ngầm.

Bạn có thể nhớ lại từ một hướng dẫn trước rằng có thể định nghĩa các khu vực của Grid.

Chúng ta có thể định nghĩa bốn khu vực của Grid như thế này:

Điều này cho chúng ta những thứ sau đây:

Đặt tên một khu vực Grid là header sẽ đồng thời tự động gán tên cho bốn đường biên của nó. Các Row Line xung quanh nó trở thành header-startheader-end, và tương tự như vậy hai Column Line cũng trở thành header-startheader-end. Áp dụng tương tự cho các khu vực khác, tạo ra các tên của Line main-start, main-end, sidebar-start và vân vân.

Lưu ý: Theo chiều ngược lại, việc đặt tên các Line theo định dạng tương tự (header-startheader-end) sẽ tạo nên một tên khu vực của Grid là header.

Chúng ta có thể sử dụng các tên cho Line này giống như chúng ta đã làm, sắp xếp vị trí của các phần tử. Và một lần nữa, chúng tồn tại bên cạnh bất kỳ tên nào mà chính bạn định nghĩa, và số thứ tự ban đầu của Line.

Kết thúc của Line

Đó là tất cả cho bài hướng dẫn nhanh này! Hãy nhớ rằng: tạo thói quen đặt tên các Line và khu vực của bạn để dễ dàng quản lý và duy trì Grid của bạn hơn.

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.