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

Tìm hiểu về "Thuật toán tự động sắp xếp" của CSS Grid (hệ thống lưới)

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Going Responsive With auto-fill and minmax()
Quick Tip: Name Your CSS Grid Lines, Just in Case

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

Trong bài hướng dẫn trước về CSS Grid, chúng ta đã tìm hiểu về các cột có kích thước động và các gutter (khoảng không gian giữa các cột) tốt hơn. Chúng ta đã biết rằng không cần thiết phải thiết lập một cách chính xác vị trí của các thành phần Grid; nếu chúng ta định nghĩa các thuộc tính của hệ thống Grid của chúng ta, thì hệ thống Grid sẽ phân chia các phần tử của chúng ta tuỳ thuộc vào thuật toán tự động sắp xếp.

Trong bài hướng dẫn này chúng ta sẽ tìm hiểu về cách thuật toán làm việc và làm thế nào chúng ta có thể tương tác lên nó.

Thiết lập

Nếu trình duyệt của bạn hiện tại không hỗ trợ CSS Grid thì bạn sẽ cần phải tìm cách để có thể theo kịp bài hướng dẫn này. Đọc cái này:

  • CSS Grid Layout: Hướng dẫn nhanh

Nó bắt đầu với một Grid

Đây là một grid minh hoạ để bắt đầu; nó là một container (kho chứa) mà chúng ta đã định nghĩa là display: grid; và giữ 18 phần tử con. Chúng ta đã nói nó cần phải có ít nhất 5 cột, chiều rộng mỗi cột bằng nhau, cùng một số hàng, và một gutter 2px.

Đến đây như vậy là khá ổn, và bạn có thể thấy rằng Grid đã lấy mười tám phần tử của chúng ta và đã đẩy chúng vào, bắt đầu từ trên cùng bên trái, di chuyển qua bên phải, sau đó di chuyển xuống từng hàng. Cách xử lý này thì rất giống với cách làm của float.

Lưu ý: Các xử lý đối với left-to-right sẽ là ngược lại nếu bạn đang làm việc với layout direction: RTL;

Bỏ đi một yếu tố cản trở trong công việc.

Mọi thứ đều thú vị và đơn giản, nhưng hãy xem những gì xảy ra khi các phần tử của chúng ta không hoàn toàn vừa. Đối với .item-7 chúng ta sẽ thêm vài luật để làm nó lớn hơn bằng cách trộn hai cột và hai dòng.

Bây giờ thì nó trông như thế nào?

Không tệ đó chứ! .item-7 lấp đầy khoảng trống, vì vậy .item-8.item-9 được dời ra xa. .item-10 sau đó sẽ xem nếu có một không gian trống bên cạnh .item-9, và khi nó thấy không phải thì nó di chuyển xuống một hàng và bắt đầu lại về bên trái. Các phần tử khác tiếp tục chèn vào theo cùng một cách giống nhau.

Nhưng khoan, sẽ như thế nào nếu chúng ta cũng làm cho .item-9 to hơn một tí?

Bây giờ thì nó bắt đầu trông thú vị; .item-9 không còn vừa với cột cuối vì vậy nó bị đẩy xuống hàng tiếp theo. Vì nó không phù hợp với bất cứ điều gì ngoài .item-7 được đặt. Bạn có thể tưởng tượng, .item-10 sẽ chèn chính nó phía dưới .item-6 lần nữa, nhưng, nếu bạn nhớ, nó tìm kiếm một cột rỗng, sau đó nó chuyển xuống một dòng và chuyển hướng qua trái lần nữa. Đây là một khái niệm quan trọng cần phải nắm.

Nói "Xin chào" với grid-auto-flow

Nếu như bạn nhìn vào phần minh hoạ trước thì bạn sẽ thấy rằng .item-18, lúc nó không thể tìm thấy khoảng trống gần với .item-7, nó đã chuyển xuống một dòng. Chúng ta chỉ thực sự định nghĩa năm dòng, nhưng Grid đã xem như chúng ta sẽ muốn một hàng khác thêm vào. Điều này nhờ vào grid-auto-flow, mà thuộc về các phần tử grid, và có giá trị mặc định là row. Chúng ta có thể thay đổi giá trị này thành column nếu muốn, mà sẽ hoàn toàn thay đổi cách mà grid của chúng ta làm việc.

Cái này trông tương tự, nhưng bạn sẽ để ý thấy rằng các phần tử của chúng ta đã bị cắt xén ở phía trên cùng bên trái, sau đó di chuyển xuống để lấp đầy dòng, sau đó di chuyển ngang qua cột thứ hai và tương tự. Vì vậy bây giờ khi một phần tử quá lớn cho việc khởi động của nó, các mục tiếp sau tìm kiếm tiếp không gian trống ở hàng kế tiếp, sau đó thất bại trong việc thay đổi lên cột kế tiếp.

Sự hợp lý của Dense (dày đặt)

Chúng ta có thể thêm từ khóa khác vào thuộc tính grid-auto-flow của chúng ta, và nó có thể là từ khóa CSS yêu thích của tôi đến nay: dense. Mặc định của nó là sparse (cái yêu thích thứ hai của tôi). Chúng ta hãy làm như sau:

Lưu ý: chúng ta không cần thêm row ở đây, nó được mặc nhiên, mà cái này là để làm nổi bật cú pháp.

Bây giờ .item-10 của chúng ta, khi phát hiện có khoảng trống bên cạnh .item-9, đầu tiên kiểm tra những gì ở phía trên trước khi chuyển đến một hàng khác.

Nhờ có sự thay đổi này trong các thuật toán định vị trí, các phần tử của chúng ta bây giờ được gom lại một cách dày đặt, cho chúng ta một grid hiệu quả hơn. Tuy nhiên, điều này có nghĩa là kiểu bố trí trực quan không nhất thiết phản ánh thứ tự sắp xếp của nguồn, điều mà có thể không phải luôn luôn giúp ích cho người dùng.

Kết luận

Chúng ta hãy cùng tóm tắt lại:

  1. Nếu chúng ta không định nghĩa vị trí của một phần tử, thì thuật toán tự động định vị trí của Grid sẽ đặt nó trong khoảng kế tiếp (và đủ lớn).
  2. Trong trường hợp không có đủ khoảng trống trong hàng hiện tại, nó sẽ bắt đầu tìm kiếm hàng phía sau, ngay cả khi nếu điều đó để lại các khoảng trống.
  3. Chúng ta có thể chuyển thứ tự tìm kiếm bằng cách thay đổi grid-auto-flow từ row thành column.
  4. grid-auto-flow chấp nhận một từ khoá để để mô tả hướng cận "đóng gói". Theo mặc định, giá trị này là sparse, nhưng chúng ta có thể thay đổi điều này với dense , điều này cố gắng để lấp vào tất cả vào tất cả các khoảng trống sẵn có.

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

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.