Khám phá Lưới ngầm của CSS Grid và Quyền hạn của vị trí tự động

Khi làm việc với CSS Grid, điều đầu tiên cần làm là thiết lập display: grid trên phần tử mà chúng ta muốn trở thành vùng chứa lưới. Sau đó, chúng tôi xác định rõ ràng lưới bằng cách sử dụng kết hợp grid-template-columns, grid-template-rowsvà grid-template-areas. Và từ đó, bước tiếp theo là đặt các mục bên trong lưới.

Đây là cách tiếp cận cổ điển nên được sử dụng và tôi cũng khuyên bạn nên áp dụng. Tuy nhiên, có một cách tiếp cận khác để tạo lưới không có bất kỳ định nghĩa rõ ràng nào. Chúng tôi gọi đây là lưới ngầm.

“Rõ ràng, ngầm hiểu? Cái quái gì đang xảy ra ở đây?"

Điều khoản kỳ lạ, phải không? Manuel Matuzovic đã có có một lời giải thích hay về những gì chúng ta có thể bằng cách "ngầm hiểu" và "rõ ràng" trong CSS Grid, nhưng chúng ta hãy đi sâu vào những gì các sNULL nói:

Sản phẩm grid-template-rows, grid-template-columnsvà grid-template-areas thuộc tính xác định một số lượng cố định các bản nhạc hình thành lưới rõ ràng. Khi các mục lưới được đặt bên ngoài các giới hạn này, vùng chứa lưới sẽ tạo các đường lưới ngầm định bằng cách thêm các đường lưới ngầm định vào lưới. Các dòng này cùng với dạng lưới rõ ràng lưới ngầm.

Vì vậy, bằng tiếng Anh đơn giản, trình duyệt tự động tạo thêm các hàng và cột trong trường hợp bất kỳ phần tử nào được đặt bên ngoài lưới đã xác định.

Còn về vị trí tự động?

Tương tự như khái niệm lưới ngầm định, vị trí tự động là khả năng trình duyệt tự động đặt các mục bên trong lưới. Không phải lúc nào chúng ta cũng cần đưa ra vị trí của từng mục.

Thông qua các trường hợp sử dụng khác nhau, chúng ta sẽ xem các tính năng như vậy có thể giúp chúng ta tạo lưới động và phức tạp như thế nào với một vài dòng mã.

Thanh bên động

Ở đây, chúng tôi có ba bố cục khác nhau nhưng chúng tôi chỉ có một cấu hình lưới hoạt động cho tất cả chúng.

main {
  display: grid;
  grid-template-columns: 1fr;
}

Chỉ có một cột đang chiếm tất cả không gian trống. Đây là lưới "rõ ràng" của chúng tôi. Nó được thiết lập để phù hợp với một mục lưới trong main thùng chứa lưới. Đó là tất cả. Một cột và một hàng:

Nhưng điều gì sẽ xảy ra nếu chúng tôi quyết định bỏ một yếu tố khác vào đó, hãy nói aside (thanh bên động của chúng tôi). Vì nó hiện đang được xác định (và rõ ràng), lưới của chúng tôi sẽ phải tự động điều chỉnh để tìm vị trí cho phần tử đó. Và nếu chúng tôi không làm gì khác với CSS của mình, đây là những gì DevTools cho chúng tôi biết đang xảy ra.

Chúng ta có thể di chuyển <aside> vào một cột bên cạnh <section>:

aside {
  grid-column-start: 2;
}

Và đây là những gì DevTools nói với chúng ta bây giờ:

Chúng tôi đặt phần tử của mình vào cột thứ hai nhưng… chúng tôi không có cột thứ hai. Kỳ lạ, phải không? Chúng tôi chưa bao giờ khai báo cột thứ hai trên <main> vùng chứa lưới, nhưng trình duyệt đã tạo một vùng chứa cho chúng tôi! Đây là phần quan trọng từ thông số kỹ thuật mà chúng tôi đã xem xét:

Khi các mục lưới được đặt bên ngoài các giới hạn này, vùng chứa lưới sẽ tạo các đường lưới ngầm định bằng cách thêm các đường lưới ngầm định vào lưới.

Tính năng mạnh mẽ này cho phép chúng tôi có bố cục động. Nếu chúng ta chỉ có <section> , tất cả những gì chúng ta nhận được là một cột. Nhưng nếu chúng ta thêm một <aside> phần tử vào hỗn hợp, một cột bổ sung được tạo để chứa nó.

Chúng tôi có thể đặt <aside> trước <section> thay vào đó như thế này:

aside {
  grid-column-end: -2;
} 

Điều này tạo cột ẩn ở đầu lưới, không giống như mã trước đó đặt cột ẩn ở cuối.

Chúng ta có thể làm điều tương tự dễ dàng hơn bằng cách sử dụng grid-auto-flow thuộc tính để đặt bất kỳ và tất cả các bản nhạc ngầm để chảy trong một column phương hướng:

Bây giờ không cần chỉ định grid-column-start để đặt <aside> phần tử ở bên phải của <section>! Trên thực tế, bất kỳ mục lưới nào khác mà chúng tôi quyết định ném vào đó bất kỳ lúc nào sẽ chảy theo hướng cột, mỗi mục được đặt trong các đường lưới ngầm của riêng nó. Hoàn hảo cho các trường hợp không biết trước số lượng mục trong lưới!

Điều đó nói rằng, chúng tôi vẫn cần grid-column-end nếu chúng ta muốn đặt nó trong một cột bên trái của nó bởi vì, nếu không, <aside> sẽ chiếm cột rõ ràng, đến lượt nó, đẩy <section> bên ngoài lưới rõ ràng và buộc nó phải lấy cột ngầm định.

Tôi biết rồi mà. Đó là một chút phức tạp. Đây là một ví dụ khác mà chúng ta có thể sử dụng để hiểu rõ hơn về điều kỳ quặc này:

Trong ví dụ đầu tiên, chúng tôi không chỉ định bất kỳ vị trí nào. Trong trường hợp này, trước tiên trình duyệt sẽ đặt <aside> trong cột rõ ràng vì nó xuất hiện đầu tiên trong DOM. Các <section>, trong khi đó, được tự động đặt trong cột lưới mà trình duyệt tự động (hoặc mặc nhiên) tạo cho chúng tôi.

Trong ví dụ thứ hai, chúng tôi đặt <aside> phần tử bên ngoài lưới rõ ràng:

aside {
  grid-column-end: -2;
}

Bây giờ nó không quan trọng <aside> xuất hiện đầu tiên trong HTML. Bằng cách chỉ định lại <aside> ở một nơi khác, chúng tôi đã thực hiện <section> phần tử có sẵn để lấy cột rõ ràng.

Lưới hình ảnh

Hãy thử một cái gì đó khác với lưới hình ảnh trong đó chúng ta có một hình ảnh lớn và một vài hình thu nhỏ bên cạnh nó (hoặc bên dưới nó).

Chúng tôi có hai cấu hình lưới. Nhưng hãy đoán xem? Tôi không xác định bất kỳ lưới nào cả! Tất cả những gì tôi đang làm là:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Thật ngạc nhiên khi chúng ta chỉ cần một dòng mã để tạo ra một thứ như thế này, vì vậy hãy cùng mổ xẻ những gì đang diễn ra và bạn sẽ thấy rằng nó dễ dàng hơn bạn nghĩ. Đầu tiên, grid-area là một thuộc tính viết tắt kết hợp các thuộc tính sau vào một khai báo duy nhất:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Chờ đợi! Không phải grid-area thuộc tính chúng tôi sử dụng để xác định khu vực được đặt tên thay vì vị trí các phần tử bắt đầu và kết thúc trên lưới?

Có, nhưng nó còn làm được nhiều hơn thế. Chúng tôi có thể viết nhiều hơn nữa về grid-area, nhưng trong trường hợp cụ thể này:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

Chúng ta có thể thấy điều tương tự khi bẻ khóa DevTools mở để mở rộng phiên bản tốc ký:

Điều này có nghĩa là phần tử hình ảnh đầu tiên trong lưới cần kéo dài ba cột và ba hàng. Nhưng vì chúng tôi không xác định bất kỳ cột hoặc hàng nào nên trình duyệt sẽ thực hiện điều đó cho chúng tôi.

Về cơ bản, chúng tôi đã đặt hình ảnh đầu tiên trong HTML để chiếm một lưới 3⨉3. Điều đó có nghĩa là bất kỳ hình ảnh nào khác sẽ được đặt tự động trong cùng ba cột đó mà không cần phải chỉ định bất kỳ điều gì mới.

Để tóm tắt, chúng tôi đã nói với trình duyệt rằng hình ảnh đầu tiên cần chiếm không gian của ba cột và ba hàng mà chúng tôi chưa bao giờ xác định rõ ràng khi thiết lập vùng chứa lưới. Trình duyệt thiết lập các cột và hàng đó cho chúng tôi. Kết quả là, các hình ảnh còn lại trong HTML chuyển vào đúng vị trí bằng cách sử dụng ba cột và hàng giống nhau. Và vì hình ảnh đầu tiên chiếm tất cả ba cột trong hàng đầu tiên, các hình ảnh còn lại chảy vào các hàng bổ sung mà mỗi hàng chứa ba cột, trong đó mỗi hình ảnh chiếm một cột duy nhất.

Tất cả điều này từ một dòng CSS! Đó là sức mạnh của lưới “ngầm” và tự động sắp xếp.

Đối với cấu hình lưới thứ hai trong bản trình diễn đó, tất cả những gì tôi đã làm là thay đổi hướng dòng chảy tự động bằng cách sử dụng grid-auto-flow: column giống như cách chúng tôi đã làm trước đó khi đặt một <aside> phần tử bên cạnh một <section>. Điều này buộc trình duyệt phải tạo thứ tư cột nó có thể sử dụng để đặt các hình ảnh còn lại. Và vì chúng ta có ba hàng, các hình ảnh còn lại được đặt bên trong cùng một cột dọc.

Chúng ta cần thêm một vài thuộc tính vào hình ảnh để đảm bảo chúng vừa khít bên trong lưới mà không bị tràn:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Và tất nhiên, chúng tôi có thể dễ dàng cập nhật lưới để xem xét nhiều hình ảnh hơn bằng cách điều chỉnh một giá trị. Đó sẽ là 3 trong các kiểu cho hình ảnh lớn. Chúng tôi có thứ này:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Nhưng chúng tôi có thể thêm cột thứ tư chỉ bằng cách thay đổi nó thành 4 thay thế:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

Tốt hơn nữa: hãy thiết lập nó làm thuộc tính tùy chỉnh để cập nhật mọi thứ dễ dàng hơn.

Bố cục động

Trường hợp sử dụng đầu tiên với thanh bên là bố cục động đầu tiên của chúng tôi. Bây giờ chúng ta sẽ giải quyết các bố cục phức tạp hơn trong đó số lượng phần tử sẽ quyết định cấu hình lưới.

Trong ví dụ này, chúng ta có thể có bất kỳ đâu từ một đến bốn phần tử mà lưới điều chỉnh theo cách phù hợp nhất với số lượng phần tử mà không để lại bất kỳ khoảng trống khó xử hoặc thiếu khoảng trống nào.

Khi chúng ta có một yếu tố, chúng ta không làm gì cả. Phần tử sẽ kéo dài để lấp đầy hàng và cột duy nhất được tạo tự động bởi lưới.

Bit khi chúng tôi thêm phần tử thứ hai, chúng tôi tạo một cột (ngầm định) khác bằng cách sử dụng grid-column-start: 2.

Khi chúng tôi thêm phần tử thứ ba, phần tử đó sẽ chiếm chiều rộng của hai cột - đó là lý do tại sao chúng tôi sử dụng grid-column-start: span 2, nhưng chỉ khi nó là :last-child bởi vì nếu (và khi) chúng ta thêm phần tử thứ tư, phần tử đó sẽ chỉ chiếm một cột duy nhất.

Thêm vào đó, chúng tôi có bốn cấu hình lưới chỉ với hai tuyên bố và sự kỳ diệu của lưới ngầm:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

Hãy thử một cái khác:

Chúng tôi không làm gì cho trường hợp thứ nhất và thứ hai mà chúng tôi chỉ có một hoặc hai phần tử. Tuy nhiên, khi chúng tôi thêm phần tử thứ ba, chúng tôi nói với trình duyệt rằng - miễn là nó :last-child - nó sẽ kéo dài hai cột. Khi chúng tôi thêm phần tử thứ tư, chúng tôi nói với trình duyệt rằng phần tử đó cần được đặt trong cột thứ hai.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

Bạn đang bắt đầu nhận được các mẹo? Chúng tôi cung cấp hướng dẫn cụ thể cho trình duyệt dựa trên số lượng phần tử (sử dụng :nth-child) và, đôi khi, một chỉ dẫn có thể thay đổi hoàn toàn bố cục.

Cần lưu ý rằng kích thước sẽ không giống nhau khi chúng tôi làm việc với các nội dung khác nhau:

Vì chúng tôi không xác định bất kỳ kích thước nào cho các mặt hàng của mình, nên trình duyệt sẽ tự động định kích thước chúng cho chúng tôi dựa trên nội dung của chúng và chúng tôi có thể kết thúc với kích thước khác với những gì chúng tôi vừa thấy. Để khắc phục điều này, chúng ta phải rõ ràng chỉ định rằng tất cả các cột và hàng có kích thước bằng nhau:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

Này, chúng tôi chưa chơi với những tài sản đó! grid-auto-rows và grid-auto-columns đặt kích thước của các hàng và cột ngầm định tương ứng trong vùng chứa lưới. Hoặc, như thông số kỹ thuật giải thích nó:

Sản phẩm grid-auto-columns và grid-auto-rows thuộc tính chỉ định kích thước của các bản nhạc không được chỉ định kích thước bởi grid-template-rows or grid-template-columns.

Đây là một ví dụ khác mà chúng ta có thể đi đến sáu phần tử. Lần này tôi sẽ cho bạn mổ xẻ mã. Đừng lo lắng, các bộ chọn có thể trông phức tạp nhưng logic khá đơn giản.

Ngay cả với sáu phần tử, chúng tôi chỉ cần hai khai báo. Hãy tưởng tượng tất cả các bố cục phức tạp và năng động mà chúng ta có thể đạt được với một vài dòng mã!

Chuyện gì đang xảy ra với điều đó grid-auto-rows và tại sao nó nhận ba giá trị? Chúng ta đang xác định ba hàng?

Không, chúng tôi không xác định ba hàng. Nhưng chúng tôi đang xác định ba giá trị làm mẫu cho các hàng ngầm định của chúng tôi. Logic như sau:

• Nếu chúng ta có một hàng, nó sẽ có kích thước với giá trị đầu tiên.
• Nếu chúng ta có hai hàng, hàng đầu tiên nhận giá trị đầu tiên và hàng thứ hai nhận giá trị thứ hai.
• Nếu chúng ta có ba hàng, ba giá trị sẽ được sử dụng.
• Nếu chúng ta có bốn hàng (và đây là phần thú vị), chúng ta sử dụng ba giá trị cho ba hàng đầu tiên và chúng ta sử dụng lại giá trị đầu tiên một lần nữa cho hàng thứ tư. Đó là lý do tại sao nó là một loại mẫu mà chúng tôi lặp lại để định kích thước cho tất cả các hàng ngầm định.
• Nếu chúng ta có 100 hàng, chúng sẽ có kích thước là XNUMX x XNUMX để có 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, Vv

Không giống như grid-template-rows xác định số lượng hàng và kích thước của chúng, grid-auto-rows chỉ kích thước hàng có thể được tạo trong quá trình này.

Nếu chúng ta quay lại ví dụ của mình, logic là có kích thước bằng nhau khi hai hàng được tạo (chúng ta sẽ sử dụng 2fr 2fr), nhưng nếu hàng thứ ba được tạo, chúng tôi làm cho nó nhỏ hơn một chút.

Các mẫu lưới

Đối với điều cuối cùng này, chúng ta sẽ nói về các mẫu. Bạn có thể đã thấy hai bố cục cột trong đó một cột rộng hơn cột kia và mỗi hàng xen kẽ vị trí của các cột đó.

Bố cục sắp xếp này có thể khó thực hiện nếu không biết chính xác lượng nội dung chúng ta đang xử lý, nhưng sức mạnh sắp xếp tự động ngầm của CSS Grid khiến nó trở nên tương đối.

Hãy xem qua mã. Nó có thể trông phức tạp nhưng hãy chia nhỏ nó ra vì nó khá đơn giản.

Điều đầu tiên cần làm là xác định mẫu. Hãy tự hỏi bản thân: "Sau bao nhiêu phần tử, mô hình sẽ lặp lại?" Trong trường hợp này, nó sau mỗi bốn phần tử. Vì vậy, bây giờ chúng ta hãy xem chỉ sử dụng bốn yếu tố:

Bây giờ, hãy xác định lưới và thiết lập mẫu chung bằng cách sử dụng :nth-child bộ chọn để xen kẽ giữa các phần tử:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

Chúng tôi đã nói rằng mẫu của chúng tôi lặp lại sau mỗi bốn phần tử, vì vậy, chúng tôi sẽ sử dụng một cách hợp lý 4n + x Ở đâu x nằm trong khoảng từ 1 đến 4. Sẽ dễ dàng hơn một chút để giải thích mô hình theo cách này:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

Hoàn hảo, phải không? Chúng ta có bốn phần tử, và lặp lại mô hình trên phần tử thứ năm, phần tử thứ chín, v.v.

Những người :nth-child bộ chọn có thể phức tạp! Chris có một siêu hữu ích giải thích về cách tất cả hoạt động, Bao gồm cả công thức để tạo ra các mẫu khác nhau.

Bây giờ chúng ta cấu hình từng phần tử để:

1. Phần tử đầu tiên cần có hai cột và bắt đầu ở cột một (grid-column: 1/span 2).
2. Phần tử thứ hai được đặt trong cột thứ ba (grid-column-start: 3).
3. Phần tử thứ ba được đặt ở cột đầu tiên: (grid-column-start: 1).
4. Phần tử thứ tư chiếm hai cột và bắt đầu ở cột thứ hai: (grid-column: 2/span 2).

Đây là trong CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Chúng tôi có thể dừng lại ở đây và hoàn thành… nhưng chúng tôi có thể làm tốt hơn! Cụ thể, chúng tôi có thể xóa một số khai báo và dựa vào quyền hạn tự động sắp xếp của lưới để thực hiện công việc cho chúng tôi. Đây là phần phức tạp nhất để tìm kiếm và đòi hỏi thực hành nhiều để có thể xác định những gì có thể được loại bỏ.

Điều đầu tiên chúng tôi có thể làm là cập nhật grid-column: 1 /span 2 và chỉ sử dụng grid-column: span 2 vì theo mặc định, trình duyệt sẽ đặt mục đầu tiên vào cột đầu tiên. Chúng tôi cũng có thể loại bỏ điều này:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

Bằng cách đặt các mục đầu tiên, thứ hai và thứ tư, lưới sẽ tự động đặt mục thứ ba vào đúng vị trí. Điều đó có nghĩa là chúng ta còn lại với điều này:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Nhưng chúng ta có thể đi dạo làm tốt hơn! Chúng tôi cũng có thể loại bỏ điều này:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

Tại sao? Nếu chúng ta đặt phần tử thứ tư vào cột thứ hai trong khi vẫn cho phép nó chiếm hai cột đầy đủ, thì chúng ta đang buộc lưới tạo một cột ngầm định thứ ba, cho chúng ta tổng cộng ba cột mà không cần thông báo rõ ràng. Phần tử thứ tư không thể đi vào hàng đầu tiên vì mục đầu tiên cũng chiếm hai cột, vì vậy nó sẽ chảy sang hàng tiếp theo. Cấu hình này để lại cho chúng ta một cột trống ở hàng đầu tiên và một cột trống ở hàng thứ hai.

Tôi nghĩ bạn biết kết thúc của câu chuyện. Trình duyệt sẽ tự động đặt mục thứ hai và thứ ba vào những chỗ trống đó. Vì vậy, mã của chúng tôi thậm chí còn trở nên đơn giản hơn:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Tất cả những gì nó cần là năm khai báo để tạo ra một mô hình rất thú vị và rất linh hoạt. Phần tối ưu hóa có thể phức tạp, nhưng bạn sẽ quen với nó và thực hành được một số thủ thuật.

Tại sao không sử dụng grid-template-columns để xác định các cột rõ ràng vì chúng ta biết số lượng cột?

Chúng ta có thể làm điều đó! Đây là mã cho nó:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

Như bạn có thể thấy, mã chắc chắn trực quan hơn. Chúng tôi xác định ba cột lưới rõ ràng và chúng tôi nói với trình duyệt rằng phần tử đầu tiên và phần tử thứ tư cần có hai cột. Tôi rất khuyên bạn nên tiếp cận này! Nhưng mục tiêu của bài viết này là khám phá những ý tưởng và thủ thuật mới mà chúng tôi nhận được từ sức mạnh vị trí ngầm và tự động của CSS Grid.

Cách tiếp cận rõ ràng đơn giản hơn, trong khi một lưới ngầm yêu cầu bạn - tha thứ cho cách chơi chữ - lấp đầy những khoảng trống mà CSS đang thực hiện thêm công việc đằng sau hậu trường. Cuối cùng, tôi tin rằng có một sự hiểu biết vững chắc về các lưới ngầm sẽ giúp bạn hiểu rõ hơn về thuật toán CSS Grid. Rốt cuộc, chúng tôi không ở đây để nghiên cứu những gì hiển nhiên - chúng tôi ở đây để khám phá những vùng lãnh thổ hoang dã!

Hãy thử một mẫu khác, nhanh hơn một chút lần này:

Mô hình của chúng tôi lặp lại sau mỗi sáu phần tử. Mỗi phần tử thứ ba và thứ tư cần phải chiếm hai hàng đầy đủ. Nếu chúng ta đặt các yếu tố thứ ba và thứ tư, có vẻ như chúng ta không cần phải chạm vào các yếu tố khác, vì vậy chúng ta hãy thử như sau:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

Hmm, không tốt. Chúng ta cần đặt phần tử thứ hai trong cột đầu tiên. Nếu không, lưới sẽ tự động đặt nó vào cột thứ hai.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

Tốt hơn, nhưng vẫn còn nhiều việc hơn, Chúng ta cần chuyển yếu tố thứ ba lên hàng đầu. Thật hấp dẫn khi thử đặt nó ở hàng đầu tiên theo cách này:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

Nhưng điều này không hiệu quả vì nó buộc tất cả 6n + 3 các yếu tố được đặt trong cùng một khu vực tạo nên một bố cục lộn xộn. Giải pháp thực sự là giữ nguyên định nghĩa ban đầu của phần tử thứ ba và thêm grid-auto-flow: dense để lấp đầy những khoảng trống. Từ MDN:

[The] Thuật toán đóng gói “dày đặc” cố gắng lấp đầy trong các lỗ trước đó trong lưới, nếu các mục nhỏ hơn sẽ xuất hiện sau. Điều này có thể làm cho các mặt hàng có vẻ không theo thứ tự, khi làm như vậy sẽ lấp đầy các lỗ do các mặt hàng lớn hơn để lại. Nếu nó bị bỏ qua, một thuật toán "thưa thớt" sẽ được sử dụng, trong đó thuật toán vị trí chỉ di chuyển "về phía trước" trong lưới khi đặt các mục, không bao giờ quay lui để lấp đầy các lỗ. Điều này đảm bảo rằng tất cả các mục được đặt tự động sẽ xuất hiện "theo thứ tự", ngay cả khi điều này để lại các lỗ hổng mà các mục sau này có thể lấp đầy.

Tôi biết thuộc tính này không trực quan lắm nhưng đừng bao giờ quên nó khi bạn gặp vấn đề về vị trí. Trước khi thử các cấu hình khác nhau một cách vô ích, hãy thêm nó vào vì nó có thể sửa chữa bố cục của bạn mà không cần thêm nỗ lực nào.

Tại sao không luôn thêm thuộc tính này theo mặc định?

Tôi không khuyến khích nó bởi vì, trong một số trường hợp, chúng tôi không muốn hành vi đó. Lưu ý cách giải thích của MDN ở đó đề cập đến việc nó khiến các mặt hàng “không theo thứ tự” để lấp đầy các lỗ hổng do các mặt hàng lớn hơn để lại. Thứ tự trực quan thường cũng quan trọng như thứ tự nguồn, đặc biệt khi nói đến giao diện có thể truy cập và grid-auto-flow: dense đôi khi có thể gây ra sự không khớp giữa thứ tự hình ảnh và nguồn.

Mã cuối cùng của chúng tôi sau đó là:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

Một cái khác? Đi nào!

Đối với điều này, tôi sẽ không nói quá nhiều và thay vào đó sẽ cho bạn xem một hình ảnh minh họa về đoạn mã mà tôi đã sử dụng. Hãy thử xem bạn có hiểu cách tôi đạt được mã đó không:

Các mục màu đen được đặt ngầm trong lưới. Cần lưu ý rằng chúng ta có thể có được cùng một bố cục theo nhiều cách hơn so với cách tôi đến đó. Bạn cũng có thể tìm ra những điều đó chứ? Còn về việc sử dụng grid-template-columns? Chia sẻ tác phẩm của bạn trong phần bình luận.

Tôi sẽ để lại cho bạn một mẫu cuối cùng:

Tôi làm có một giải pháp cho cái này nhưng đến lượt bạn luyện tập. Lấy tất cả những gì chúng ta đã học được và thử tự mình viết mã này rồi so sánh với giải pháp của tôi. Đừng lo lắng nếu bạn kết thúc với một điều gì đó dài dòng - điều quan trọng nhất là tìm ra một giải pháp hiệu quả.

Muốn thêm?

Trước khi chúng ta kết thúc, tôi muốn chia sẻ một số câu hỏi về Stack Overflow liên quan đến CSS Grid, nơi tôi đã tham gia với các câu trả lời sử dụng nhiều kỹ thuật mà chúng ta đã đề cập ở đây. Đó là một danh sách tốt cho thấy có bao nhiêu trường hợp sử dụng thực tế và các tình huống thực tế xuất hiện khi những thứ này có ích:

Kết thúc

CSS Grid đã xuất hiện trong nhiều năm, nhưng vẫn còn rất nhiều thủ thuật ít được biết đến và sử dụng chưa được thảo luận rộng rãi. Các tính năng lưới ngầm và vị trí tự động là hai trong số đó!

Và có, điều này có thể trở nên khó khăn! Tôi đã mất rất nhiều thời gian để tìm hiểu logic đằng sau các lưới ngầm và tôi vẫn phải vật lộn với việc tự động sắp xếp. Nếu bạn muốn dành nhiều thời gian hơn để xem xét các lưới rõ ràng và ẩn, đây là một số giải thích và ví dụ bổ sung đáng xem:

Tương tự, bạn có thể muốn đọc về grid-auto-columns trong CSS-Tricks Almanac vì Mojtaba Seyedi đi sâu vào chi tiết và bao gồm các hình ảnh vô cùng hữu ích để giúp giải thích hành vi.

Như tôi đã nói khi chúng tôi bắt đầu, các phương pháp chúng tôi đề cập ở đây không nhằm thay thế các cách phổ biến mà bạn đã biết để xây dựng lưới. Tôi chỉ đơn giản là khám phá những cách khác nhau có thể hữu ích trong một số trường hợp.