Lưới

The CSS Podcast – 011: Lưới

Một bố cục rất phổ biến trong thiết kế web là bố cục tiêu đề, thanh bên, nội dung và chân trang.

Tiêu đề có biểu trưng và thanh điều hướng với thanh bên và khu vực nội dung có bài viết

Trong nhiều năm qua, đã có nhiều phương pháp để giải quyết bố cục này, nhưng với lưới CSS, không chỉ đơn giản mà bạn còn có nhiều lựa chọn. Lưới đặc biệt hữu ích khi kết hợp chế độ điều khiển mà kích thước bên ngoài cung cấp với tính linh hoạt của kích thước nội tại, giúp lưới trở thành lựa chọn lý tưởng cho loại bố cục này. Lý do là lưới là một phương thức bố cục được thiết kế cho nội dung hai chiều. Tức là bố trí các thành phần theo hàng và cột cùng một lúc.

Khi tạo bố cục lưới, bạn xác định một lưới có các hàng và cột. Sau đó, bạn đặt các mục vào lưới đó hoặc cho phép trình duyệt tự động đặt các mục đó vào các ô mà bạn đã tạo. Có rất nhiều thứ để làm với lưới, nhưng với thông tin tổng quan về những gì có sẵn, bạn sẽ nhanh chóng tạo bố cục lưới.

Tổng quan

Vậy bạn có thể làm gì với lưới? Bố cục lưới có các tính năng sau. Bạn sẽ tìm hiểu về tất cả các thành phần này trong hướng dẫn này.

  1. Bạn có thể xác định lưới bằng các hàng và cột. Bạn có thể chọn cách định cỡ các kênh hàng và cột này hoặc các kênh này có thể phản ứng với kích thước của nội dung.
  2. Các phần tử con trực tiếp của vùng chứa lưới sẽ tự động được đặt vào lưới này.
  3. Hoặc bạn có thể đặt các mục ở vị trí chính xác mà bạn muốn.
  4. Bạn có thể đặt tên cho các đường và khu vực trên lưới để dễ dàng đặt vị trí.
  5. Bạn có thể phân bổ không gian trống trong vùng chứa lưới giữa các kênh.
  6. Bạn có thể căn chỉnh các mục trong lưới trong khu vực của chúng.

Thuật ngữ về lưới

Lưới đi kèm với một loạt thuật ngữ mới vì đây là lần đầu tiên CSS có một hệ thống bố cục thực sự.

Đường lưới

Lưới được tạo thành từ các đường chạy theo chiều ngang và chiều dọc. Nếu lưới có 4 cột, thì lưới sẽ có 5 dòng cột, bao gồm cả dòng sau cột cuối cùng.

Các dòng được đánh số bắt đầu từ 1, với cách đánh số theo chế độ ghi và hướng tập lệnh của thành phần. Điều này có nghĩa là dòng 1 của cột sẽ nằm ở bên trái đối với ngôn ngữ viết từ trái sang phải như tiếng Anh và ở bên phải đối với ngôn ngữ viết từ phải sang trái như tiếng Ả Rập.

Sơ đồ biểu thị các đường lưới

Đường dẫn dạng lưới

Đường ray là khoảng trống giữa hai đường lưới. Vùng theo dõi hàng nằm giữa hai đường hàng và vùng theo dõi cột nằm giữa hai đường cột. Khi tạo lưới, chúng ta sẽ tạo các kênh này bằng cách chỉ định kích thước cho các kênh đó.

Sơ đồ thể hiện một đường lưới

Ô lưới

Ô lưới là không gian nhỏ nhất trên lưới được xác định bằng giao điểm của các kênh hàng và cột. Nó giống như một ô trong bảng hoặc một ô trong bảng tính. Nếu bạn xác định một lưới và không đặt bất kỳ mục nào, thì các mục đó sẽ tự động được bố trí một mục vào mỗi ô lưới đã xác định.

Sơ đồ biểu thị một ô lưới

Khu vực lưới

Một số ô lưới cùng nhau. Khu vực lưới được tạo bằng cách khiến một mục trải dài trên nhiều kênh.

Sơ đồ thể hiện vùng lưới

Khoảng trống

Một rãnh hoặc hẻm giữa các đường ray. Đối với mục đích định cỡ, các kênh này hoạt động giống như một kênh thông thường. Bạn không thể đặt nội dung vào khoảng trống nhưng có thể trải dài các mục trên lưới.

Sơ đồ biểu thị lưới có khoảng trống

Vùng chứa lưới

Phần tử HTML đã áp dụng display: grid, do đó tạo một ngữ cảnh định dạng lưới mới cho các phần tử con trực tiếp.

.container {
  display: grid;
}

Mục trong lưới

Mục lưới là một mục là phần tử con trực tiếp của vùng chứa lưới.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Hàng và cột

Để tạo một lưới cơ bản, bạn có thể xác định một lưới có ba kênh cột, hai kênh hàng và khoảng cách 10 pixel giữa các kênh như sau.

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

Lưới này minh hoạ nhiều nội dung được mô tả trong phần thuật ngữ. Báo cáo này có ba kênh cột. Mỗi bản nhạc sử dụng một đơn vị chiều dài khác nhau. Nó có hai kênh hàng, một kênh sử dụng đơn vị chiều dài và kênh còn lại là tự động. Khi được dùng làm kích thước tự động của kênh, bạn có thể coi kích thước này lớn bằng nội dung. Theo mặc định, các kênh sẽ tự động định cỡ.

Nếu phần tử có lớp .container có các mục con, thì các mục con đó sẽ ngay lập tức bố trí trên lưới này. Bạn có thể xem ví dụ thực tế trong bản minh hoạ bên dưới.

Lớp phủ lưới trong Chrome DevTools có thể giúp bạn hiểu được các phần khác nhau của lưới.

Mở bản minh hoạ trong Chrome. Kiểm tra phần tử có nền màu xám, có mã nhận dạng là container. Làm nổi bật lưới bằng cách chọn huy hiệu lưới trong DOM, bên cạnh phần tử .container. Trong thẻ Bố cục, hãy chọn Hiện số dòng trong trình đơn thả xuống để xem số dòng trên lưới.

Như mô tả trong chú thích và hướng dẫn
Lưới được làm nổi bật trong Công cụ của Chrome cho nhà phát triển, cho thấy số dòng, ô và kênh.

Từ khoá định cỡ nội tại

Ngoài kích thước chiều dài và tỷ lệ phần trăm như mô tả trong phần đơn vị định cỡ, các kênh lưới có thể sử dụng từ khoá định cỡ nội tại. Các từ khoá này được xác định trong quy cách Kích thước hộp và thêm các phương thức bổ sung để định cỡ hộp trong CSS, không chỉ các kênh lưới.

  • min-content
  • max-content
  • fit-content()

Từ khoá min-content sẽ giúp một bản nhạc nhỏ nhất có thể mà không làm tràn nội dung bản nhạc. Việc thay đổi bố cục lưới mẫu để có ba kênh cột đều ở kích thước min-content sẽ có nghĩa là các kênh đó sẽ trở nên hẹp như từ dài nhất trong kênh.

Từ khoá max-content có tác dụng ngược lại. Bản nhạc sẽ đủ rộng để tất cả nội dung hiển thị trong một chuỗi dài không bị gián đoạn. Điều này có thể gây ra tình trạng tràn vì chuỗi sẽ không được gói.

Ban đầu, hàm fit-content() hoạt động giống như max-content. Tuy nhiên, khi bản nhạc đạt đến kích thước mà bạn truyền vào hàm, nội dung sẽ bắt đầu gói lại. Vì vậy, fit-content(10em) sẽ tạo một kênh nhỏ hơn 10em, nếu kích thước max-content nhỏ hơn 10em, nhưng không bao giờ lớn hơn 10em.

Trong bản minh hoạ tiếp theo, hãy thử các từ khoá định cỡ nội tại khác nhau bằng cách thay đổi kích thước của các kênh lưới.

Đơn vị fr

Chúng tôi có các phương diện chiều dài, tỷ lệ phần trăm hiện có và cả những từ khoá mới này. Ngoài ra, còn có một phương thức định cỡ đặc biệt chỉ hoạt động trong bố cục lưới. Đây là đơn vị fr, một độ dài linh hoạt mô tả phần không gian có sẵn trong vùng chứa lưới.

Đơn vị fr hoạt động tương tự như cách sử dụng flex: auto trong flexbox. Phương thức này phân bổ không gian sau khi các mục đã được bố trí. Do đó, để có ba cột đều có cùng một phần không gian có sẵn:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Vì đơn vị fr chia sẻ không gian có sẵn, nên bạn có thể kết hợp với khoảng trống có kích thước cố định hoặc các kênh có kích thước cố định. Để có một thành phần có phần tử có kích thước cố định và bản nhạc thứ hai chiếm mọi không gian còn lại, bạn có thể sử dụng dưới dạng danh sách bản nhạc của grid-template-columns: 200px 1fr.

Việc sử dụng các giá trị khác nhau cho đơn vị fr sẽ chia sẻ không gian theo tỷ lệ. Giá trị lớn hơn sẽ nhận được nhiều không gian trống hơn. Trong bản minh hoạ bên dưới, hãy thay đổi giá trị của kênh thứ ba.

Hàm minmax()

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

Hàm này có nghĩa là bạn có thể đặt kích thước tối thiểu và tối đa cho một bản nhạc. Điều này có thể khá hữu ích. Nếu lấy ví dụ về đơn vị fr ở trên để phân phối không gian còn lại, bạn có thể ghi đơn vị này bằng cách sử dụng minmax() dưới dạng minmax(auto, 1fr). Lưới xem xét kích thước nội tại của nội dung, sau đó phân phối không gian có sẵn sau khi cung cấp đủ không gian cho nội dung. Điều này có nghĩa là bạn có thể không nhận được các kênh có cùng một phần không gian trong vùng chứa lưới.

Để buộc một kênh chiếm một phần không gian bằng nhau trong vùng chứa lưới trừ các khoảng trống, hãy sử dụng minmax. Thay thế 1fr làm kích thước kênh bằng minmax(0, 1fr). Điều này làm cho kích thước tối thiểu của bản nhạc là 0 chứ không phải kích thước nội dung tối thiểu. Sau đó, Lưới sẽ lấy tất cả kích thước có sẵn trong vùng chứa, trừ đi kích thước cần thiết cho mọi khoảng trống và chia sẻ phần còn lại theo đơn vị fr.

Ký hiệu repeat()

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 76.
  • Safari: 10.1.

Source

Nếu muốn tạo lưới kênh gồm 12 cột với các cột bằng nhau, bạn có thể sử dụng CSS sau.

.container {
    display: grid;
    grid-template-columns:
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr);
}

Hoặc bạn có thể viết mã này bằng repeat():

.container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
}

Bạn có thể dùng hàm repeat() để lặp lại bất kỳ phần nào trong danh sách bản nhạc. Ví dụ: bạn có thể lặp lại một mẫu của các bản nhạc. Bạn cũng có thể có một số bản nhạc thông thường và một phần lặp lại.

.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill và auto-fit

Bạn có thể kết hợp mọi kiến thức đã học về cách định cỡ kênh, minmax() và lặp lại để tạo một mẫu hữu ích với bố cục lưới. Có thể bạn không muốn chỉ định số lượng kênh theo cột, mà muốn tạo nhiều kênh nhất có thể trong vùng chứa.

Bạn có thể thực hiện việc này bằng repeat() và từ khoá auto-fill hoặc auto-fit. Trong bản minh hoạ dưới đây, lưới sẽ tạo ra nhiều kênh 200 pixel vừa với vùng chứa. Mở bản minh hoạ trong một cửa sổ mới và xem lưới thay đổi như thế nào khi bạn thay đổi kích thước của khung nhìn.

Trong bản minh hoạ, chúng ta sẽ lấy nhiều kênh nhất có thể. Tuy nhiên, các kênh này không linh hoạt. Bạn sẽ thấy một khoảng trống ở cuối cho đến khi có đủ không gian cho một kênh 200 pixel khác. Nếu thêm hàm minmax(), bạn có thể yêu cầu nhiều kênh phù hợp với kích thước tối thiểu là 200 pixel và tối đa là 1fr. Sau đó, Lưới sẽ bố trí các kênh 200 pixel và mọi không gian còn lại sẽ được phân bổ đều cho các kênh đó.

Thao tác này sẽ tạo ra một bố cục thích ứng hai chiều mà không cần bất kỳ truy vấn nội dung đa phương tiện nào.

Có một sự khác biệt nhỏ giữa auto-fill và auto-fit. Trong bản minh hoạ tiếp theo, hãy chạy với bố cục lưới bằng cú pháp được giải thích ở trên, nhưng chỉ có hai mục lưới trong vùng chứa lưới. Khi sử dụng từ khoá auto-fill, bạn có thể thấy các kênh trống đã được tạo. Thay đổi từ khoá thành auto-fit và các kênh sẽ thu gọn xuống kích thước 0. Điều này có nghĩa là các kênh linh hoạt hiện sẽ phát triển để sử dụng không gian.

Nếu không, từ khoá auto-fill và auto-fit sẽ hoạt động giống hệt nhau. Không có sự khác biệt giữa các kênh này sau khi kênh đầu tiên được lấp đầy.

Tự động đặt

Bạn đã thấy tính năng tự động đặt lưới hoạt động trong các bản minh hoạ cho đến nay. Các mục được đặt trên lưới theo thứ tự xuất hiện trong nguồn. Đối với nhiều bố cục, đây có thể là tất cả những gì bạn cần. Nếu cần có nhiều quyền kiểm soát hơn, bạn có thể làm một số việc. Việc đầu tiên là điều chỉnh bố cục tự động đặt.

Đặt các mục trong cột

Hành vi mặc định của bố cục lưới là đặt các mục dọc theo hàng. Thay vào đó, bạn có thể đặt các mục vào cột bằng grid-auto-flow: column. Bạn cần xác định các kênh hàng, nếu không các mục sẽ tạo các kênh cột nội tại và bố cục tất cả trong một hàng dài.

Các giá trị này liên quan đến chế độ ghi của tài liệu. Một hàng luôn chạy theo hướng một câu chạy ở chế độ viết của tài liệu hoặc thành phần. Trong bản minh hoạ tiếp theo, bạn có thể thay đổi chế độ giá trị của grid-auto-flow và thuộc tính writing-mode.

Các bản nhạc trải dài

Bạn có thể khiến một số hoặc tất cả các mục trong bố cục được đặt tự động trải dài trên nhiều kênh. Sử dụng từ khoá span cộng với số dòng cần span làm giá trị cho grid-column-end hoặc grid-row-end.

.item {
    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

Vì bạn chưa chỉ định grid-column-start, nên giá trị ban đầu của auto sẽ được sử dụng và được đặt theo các quy tắc tự động đặt. Bạn cũng có thể chỉ định cùng một nội dung bằng cách sử dụng viết tắt grid-column:

.item {
    grid-column: auto / span 2;
}

Lấp đầy khoảng trống

Bố cục được đặt tự động với một số mục trải dài trên nhiều kênh có thể dẫn đến một lưới có một số ô không được điền. Hành vi mặc định của bố cục lưới có bố cục được đặt hoàn toàn tự động là luôn tiến về phía trước. Các mục sẽ được đặt theo thứ tự trong nguồn hoặc bất kỳ nội dung sửa đổi nào bằng thuộc tính order. Nếu không có đủ không gian để vừa với một mục, lưới sẽ để lại một khoảng trống và chuyển sang kênh tiếp theo.

Bản minh hoạ tiếp theo sẽ cho thấy hành vi này. Hộp đánh dấu này sẽ áp dụng chế độ đóng gói dày đặc. Bạn có thể bật tính năng này bằng cách đặt giá trị dense cho grid-auto-flow. Khi có giá trị này, lưới sẽ lấy các mục sau trong bố cục và sử dụng các mục đó để lấp đầy khoảng trống. Điều này có thể có nghĩa là màn hình bị ngắt kết nối với thứ tự logic.

Đặt mục

Bạn đã có nhiều chức năng từ CSS Grid. Bây giờ, hãy xem cách chúng ta định vị các mục trên lưới mà chúng ta đã tạo.

Điều đầu tiên cần nhớ là Bố cục lưới CSS dựa trên lưới các dòng được đánh số. Cách đơn giản nhất để đặt các phần tử vào lưới là đặt các phần tử từ dòng này sang dòng khác. Bạn sẽ khám phá các cách khác để đặt mục trong hướng dẫn này, nhưng bạn luôn có quyền truy cập vào các dòng được đánh số đó.

Sau đây là các thuộc tính mà bạn có thể sử dụng để đặt các mục theo số dòng:

Các hàm này có các ký hiệu viết tắt cho phép bạn thiết lập cả dòng bắt đầu và dòng kết thúc cùng một lúc:

Để đặt mục, hãy đặt các đường bắt đầu và kết thúc của vùng lưới mà mục đó sẽ được đặt vào.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px 100px);
}

.item {
    grid-column-start: 1; /* start at column line 1 */
    grid-column-end: 4; /* end at column line 4 */
    grid-row-start: 2; /*start at row line 2 */
    grid-row-end: 4; /* end at row line 4 */
}

Công cụ dành cho nhà phát triển của Chrome có thể cung cấp cho bạn hướng dẫn trực quan về các dòng để kiểm tra vị trí đặt mục.

Việc đánh số dòng tuân theo chế độ ghi và hướng của thành phần. Trong bản minh hoạ tiếp theo, hãy thay đổi chế độ hoặc hướng viết để xem cách bố trí các mục luôn nhất quán với cách văn bản chảy.

Xếp chồng các mục

Khi sử dụng tính năng định vị dựa trên dòng, bạn có thể đặt các mục vào cùng một ô của lưới. Điều này có nghĩa là bạn có thể xếp chồng các mục hoặc khiến một mục chồng lên một phần của mục khác. Các mục xuất hiện sau trong nguồn sẽ hiển thị phía trên các mục xuất hiện trước. Bạn có thể thay đổi thứ tự xếp chồng này bằng cách sử dụng z-index giống như với các mục được định vị.

Số dòng âm

Khi tạo lưới bằng grid-template-rows và grid-template-columns, bạn sẽ tạo ra lưới tường minh. Đây là lưới mà bạn đã xác định và đặt kích thước cho các kênh.

Đôi khi, bạn sẽ thấy các mục hiển thị bên ngoài lưới rõ ràng này. Ví dụ: bạn có thể xác định các kênh cột, sau đó thêm một số hàng của các mục lưới mà không cần xác định các kênh hàng. Theo mặc định, các kênh sẽ được tự động định cỡ. Bạn cũng có thể đặt một mục bằng grid-column-end nằm bên ngoài lưới rõ ràng đã xác định. Trong cả hai trường hợp này, lưới sẽ tạo các kênh để bố cục hoạt động, và các kênh này được gọi là lưới ngầm ẩn.

Trong hầu hết trường hợp, việc bạn sử dụng lưới ngầm ẩn hay rõ ràng sẽ không tạo ra sự khác biệt. Tuy nhiên, với vị trí dựa trên dòng, bạn có thể gặp phải sự khác biệt chính giữa hai vị trí này.

Khi sử dụng số dòng âm, bạn có thể đặt các mục từ dòng cuối của lưới tường minh. Điều này có thể hữu ích nếu bạn muốn một mục trải dài từ dòng cột đầu tiên đến dòng cột cuối cùng. Trong trường hợp đó, bạn có thể sử dụng grid-column: 1 / -1. Mục này sẽ kéo giãn ngay trên lưới rõ ràng.

Tuy nhiên, cách này chỉ hoạt động với lưới tường minh. Lấy bố cục gồm 3 hàng các mục được đặt tự động mà bạn muốn mục đầu tiên trải dài đến dòng cuối của lưới.

Một thanh bên có 8 mục lưới đồng cấp

Bạn có thể nghĩ rằng bạn có thể cấp cho mục đó grid-row: 1 / -1. Trong bản minh hoạ bên dưới, bạn có thể thấy cách này không hoạt động. Các kênh được tạo trong lưới ngầm ẩn, không có cách nào để đạt đến cuối lưới bằng -1.

Định cỡ các kênh ngầm ẩn

Theo mặc định, các kênh được tạo trong lưới ngầm ẩn sẽ được tự động định cỡ. Tuy nhiên, nếu bạn muốn kiểm soát kích thước của các hàng, hãy sử dụng thuộc tính grid-auto-rows và đối với các cột, hãy sử dụng thuộc tính grid-auto-columns.

Cách tạo tất cả các hàng ngầm ẩn ở kích thước tối thiểu là 10em và kích thước tối đa là auto:

.container {
    display: grid;
    grid-auto-rows: minmax(10em, auto);
}

Để tạo các cột ngầm ẩn có mẫu là các kênh có chiều rộng 100px và 200px. Trong trường hợp này, cột ngầm ẩn đầu tiên sẽ là 100px, cột thứ hai là 200px, cột thứ ba là 100px, v.v.

.container {
    display: grid;
    grid-auto-columns: 100px 200px;
}

Đường lưới được đặt tên

Việc đặt tên cho các dòng thay vì số có thể giúp bạn dễ dàng đặt các mục vào bố cục hơn. Bạn có thể đặt tên cho bất kỳ dòng nào trên lưới bằng cách thêm tên bạn chọn vào giữa các dấu ngoặc vuông. Bạn có thể thêm nhiều tên, phân tách bằng dấu cách bên trong cùng một dấu ngoặc đơn. Sau khi bạn đặt tên cho các dòng, bạn có thể sử dụng các dòng đó thay vì số.

.container {
    display: grid;
    grid-template-columns:
      [main-start aside-start] 1fr
      [aside-end content-start] 2fr
      [content-end main-end]; /* a two column layout */
}

.sidebar {
    grid-column: aside-start / aside-end;
    /* placed between line 1 and 2*/
}

footer {
    grid-column: main-start / main-end;
    /* right across the layout from line 1 to line 3*/
}

Khu vực mẫu lưới

Bạn cũng có thể đặt tên cho các khu vực của lưới và đặt các mục vào các khu vực được đặt tên đó. Đây là một kỹ thuật tuyệt vời vì cho phép bạn xem thành phần của mình ngay trong CSS.

Để bắt đầu, hãy đặt tên cho các phần tử con trực tiếp của vùng chứa lưới bằng thuộc tính grid-area:

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

Tên có thể là bất kỳ tên nào bạn muốn, ngoại trừ từ khoá auto và span. Sau khi đặt tên cho tất cả các mục, hãy sử dụng thuộc tính grid-template-areas để xác định mỗi mục sẽ trải dài trên ô lưới nào. Mỗi hàng được xác định trong dấu ngoặc kép.

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "header header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

Có một số quy tắc khi sử dụng grid-template-areas.

  • Giá trị này phải là một lưới hoàn chỉnh không có ô trống.
  • Để mở rộng các bản nhạc, hãy lặp lại tên.
  • Các khu vực được tạo bằng cách lặp lại tên phải có hình chữ nhật và không được ngắt kết nối.

Nếu bạn vi phạm bất kỳ quy tắc nào ở trên, giá trị sẽ được coi là không hợp lệ và bị loại bỏ.

Để để lại khoảng trắng trên lưới, hãy sử dụng . hoặc các giá trị nhân không có khoảng trắng giữa các giá trị đó. Ví dụ: để để trống ô đầu tiên trên lưới, tôi có thể thêm một loạt ký tự .:

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "....... header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

Vì toàn bộ bố cục được xác định ở một nơi, nên bạn có thể dễ dàng xác định lại bố cục bằng cách sử dụng truy vấn nội dung nghe nhìn. Trong ví dụ tiếp theo, tôi đã tạo một bố cục hai cột chuyển sang ba cột bằng cách xác định lại giá trị của grid-template-columns và grid-template-areas. Mở ví dụ trong một cửa sổ mới để thay đổi kích thước khung nhìn và xem bố cục thay đổi.

Bạn cũng có thể xem cách thuộc tính grid-template-areas liên quan đến writing-mode và hướng, cũng như với các phương thức lưới khác.

Thuộc tính viết tắt

Có hai thuộc tính viết tắt cho phép bạn thiết lập nhiều thuộc tính lưới cùng một lúc. Các thuộc tính này có thể hơi khó hiểu cho đến khi bạn phân tích chính xác cách chúng hoạt động cùng nhau. Bạn có thể sử dụng các ký tự viết tắt hoặc ký tự viết dài tuỳ ý.

grid-template

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

Thuộc tính grid-template là viết tắt của grid-template-rows, grid-template-columns và grid-template-areas. Các hàng được xác định trước tiên, cùng với giá trị của grid-template-areas. Thêm kích thước cột sau /.

.container {
    display: grid;
    grid-template:
      "head head head" minmax(150px, auto)
      "sidebar content content" auto
      "sidebar footer footer" auto / 1fr 1fr 1fr;
}

Tài sản grid

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

Bạn có thể sử dụng viết tắt grid giống hệt như viết tắt grid-template. Khi được sử dụng theo cách này, thuộc tính này sẽ đặt lại các thuộc tính lưới khác mà nó chấp nhận về giá trị ban đầu. Bộ đầy đủ là:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

Bạn có thể sử dụng cách viết tắt này để xác định cách hoạt động của lưới ngầm ẩn, ví dụ:

.container {
    display: grid;
    grid: repeat(2, 80px) / auto-flow  120px;
}

Căn chỉnh

Bố cục lưới sử dụng các thuộc tính căn chỉnh giống như bạn đã tìm hiểu trong hướng dẫn về flexbox. Trong lưới, các thuộc tính bắt đầu bằng justify- luôn được sử dụng trên trục nội tuyến, hướng mà các câu chạy trong chế độ viết.

Các thuộc tính bắt đầu bằng align- được sử dụng trên trục khối, hướng mà các khối được bố trí trong chế độ viết.

  • justify-content và align-content: phân bổ thêm không gian trong vùng chứa lưới xung quanh hoặc giữa các kênh.
  • justify-self và align-self: được áp dụng cho một mục trong lưới để di chuyển mục đó xung quanh bên trong khu vực lưới mà mục đó được đặt.
  • justify-items và align-items: được áp dụng cho vùng chứa lưới để đặt tất cả thuộc tính justify-self trên các mục.

Phân bổ không gian thừa

Trong bản minh hoạ này, lưới lớn hơn không gian cần thiết để bố trí các kênh có chiều rộng cố định. Điều này có nghĩa là chúng ta có không gian trong cả kích thước nội tuyến và kích thước khối của lưới. Hãy thử nhiều giá trị của align-content và justify-content để xem các kênh hoạt động như thế nào.

Lưu ý cách khoảng trống trở nên lớn hơn khi sử dụng các giá trị như space-between, và mọi mục lưới trải dài trên hai kênh cũng tăng lên để hấp thụ không gian bổ sung được thêm vào khoảng trống.

Di chuyển nội dung

Các mục có màu nền dường như lấp đầy hoàn toàn khu vực lưới mà chúng được đặt vào, vì giá trị ban đầu của justify-self và align-self là stretch.

Trong bản minh hoạ, hãy thay đổi giá trị của justify-items và align-items để xem việc này ảnh hưởng như thế nào đến bố cục. Khu vực lưới không thay đổi kích thước, thay vào đó, các mục đang được di chuyển xung quanh bên trong khu vực đã xác định.

Kiểm tra mức độ hiểu biết

Kiểm tra kiến thức của bạn về lưới

Đâu là thuật ngữ về lưới CSS?

dòng
Lưới được chia bởi các đường phân cách chạy theo chiều ngang và chiều dọc này.
vòng kết nối
Rất tiếc, không có khái niệm về vòng tròn trong lưới CSS.
ô
Một giao điểm của một hàng và một cột tạo ra một ô lưới.
khu vực
Nhiều ô với nhau.
tàu
Rất tiếc, không có khái niệm nào về tàu trong lưới CSS.
khoảng trống
Khoảng trống giữa các ô.
bài hát
Một hàng hoặc một cột là một kênh trong lưới.
 
main {
  display: grid;
}

Hướng bố cục mặc định của lưới là gì?

Hàng
Nếu không có cột nào được xác định, các phần tử con của lưới sẽ sắp xếp theo hướng khối như bình thường.
Cột
Nếu có grid-auto-flow: column, thì lưới sẽ bố cục dưới dạng cột.

Sự khác biệt giữa auto-fit và auto-fill là gì?

auto-fit sẽ kéo giãn các ô cho vừa với vùng chứa, còn auto-fill thì không.
auto-fill đặt nhiều mục nhất có thể vào mẫu mà không bị kéo giãn. Fit sẽ giúp các thành phần này vừa vặn.
auto-fit sẽ kéo giãn vùng chứa cho vừa với các phần tử con, trong đó auto-fill sẽ làm cho các phần tử con vừa với vùng chứa.
Đây không phải là cách hoạt động của các thuộc tính này.

min-content là gì?

Bằng 0%
0% là giá trị tương đối của hộp mẹ, còn min-content là giá trị tương đối của các từ và hình ảnh trong hộp.
Chữ cái nhỏ nhất
Mặc dù có một chữ cái nhỏ nhất, nhưng chữ cái không phải là nội dung mà min-content đang đề cập.
Từ hoặc hình ảnh dài nhất.
Trong cụm từ "CSS is awesome" (CSS thật tuyệt vời), từ "awesome" (tuyệt vời) sẽ là min-content.

max-content là gì?

Câu dài nhất hoặc hình ảnh lớn nhất.
Đây là kích thước tối đa mà nội dung của hộp yêu cầu hoặc đã chỉ định. Đó là một câu ở trạng thái rộng nhất hoặc một hình ảnh ở trạng thái rộng nhất.
Chữ cái dài nhất.
Mặc dù có một chữ cái dài nhất, nhưng chữ cái không phải là nội dung mà max-content đang đề cập.
Từ dài nhất.
Từ dài nhất là min-content.

Tự động đặt vị trí là gì?

Khi lưới lấy các mục con và đặt các mục đó theo thứ tự tốt nhất dựa trên phương pháp phỏng đoán của trình duyệt.
Không có trình duyệt nào thay đổi thứ tự nội dung của bạn, chỉ có kiểu của riêng bạn mới làm được điều đó.
Khi các mục con của lưới đã được cấp grid-area và được đặt trên ô đó.
Đó là vị trí rõ ràng chứ không phải vị trí tự động.
Khi các mục lưới chưa được chỉ định được đặt bên cạnh trong mẫu bố cục.
Các mục trong lưới không có khu vực rõ ràng sẽ được đặt trong ô lưới tiếp theo có sẵn

Tài nguyên

Hướng dẫn này đã cung cấp cho bạn thông tin tổng quan về các phần khác nhau của quy cách bố cục lưới. Để tìm hiểu thêm, hãy xem các tài nguyên sau.