Lưới

Podcast CSS – 011: Grid

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

Trong những 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ỉ tương đối đơn giản, nhưng bạn có rất nhiều lựa chọn. Lưới đặc biệt hữu ích trong việc kết hợp phần điều khiển việc định cỡ bên ngoài mang lại sự linh hoạt trong việc định kích thước nội tại, nên đây là điều kiện lý tưởng cho kiểu 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. Điều đó có nghĩa là sắp xếp mọi thứ thành hàng và cột cùng một lúc.

Khi tạo bố cục lưới, bạn sẽ 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 chúng vào các ô bạn đã tạo. Có rất nhiều thông tin để chia sẻ nhưng với tổng quan về những gì hiện có bạn sẽ nhanh chóng tạo được bố cục lưới.

Tổng quan

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

1. Lưới có thể được xác định bằng các hàng và cột. Bạn có thể chọn cách định kích thước các bảng theo dõi hàng và cột này hoặc chúng có thể tương ứng với kích thước của nội dung.
2. 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ào vị trí chính xác mà bạn muốn.
4. Bạn có thể đặt tên cho các đường và vùng trên lưới để dễ dàng sắp xếp vị trí hơn.
5. Không gian dự phòng trong vùng chứa lưới có thể được phân bổ 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 tương ứng.

Thuật ngữ về lưới

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

Đường lưới

Lưới bao gồm các đường chạy theo chiều ngang và chiều dọc. Nếu lưới có 4 cột, mẫu 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 cột 1 sẽ nằm ở bên trái bằng ngôn ngữ từ trái sang phải, chẳng hạn như tiếng Anh, và ở bên phải bằng ngôn ngữ từ phải sang trái, chẳng hạn như tiếng Ả Rập.

Đường lưới

Đường đua là khoảng cách giữa hai đường lưới. Một bảng theo dõi hàng nằm giữa hai dòng hàng và một bảng theo dõi cột ở giữa hai dò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 chúng.

Ô 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 đường kẻ hàng và cột. Chỉ số này cũng 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 chúng sẽ tự động được bố trí một mục vào từng ô lưới xác định.

Khu vực lưới

Nhiều ô lưới với nhau. Các 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 tuyến đường.

Mảng trống

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

Vùng chứa lưới

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

.container {
  display: grid;
}

Mục trong lưới

Mục trong 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ó 3 dấu vết cột, hai kênh 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 thể hiện nhiều nội dung được mô tả trong phần thuật ngữ. Báo cáo này có 3 kênh cột. Mỗi bản nhạc sử dụng một đơn vị thời lượng khác nhau. Báo cáo này có hai kênh một URL sử dụng đơn vị chiều dài và nhãn còn lại hiển thị tự động. Khi được dùng làm kích thước bản nhạc, tự động có thể được coi là lớn bằng nội dung. Theo mặc định, các tuyến đường được tự động định kích thước.

Nếu phần tử có lớp .container có các mục con, chúng sẽ được bố trí ngay lập tức 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 Công cụ của Chrome cho nhà phát triển có thể giúp bạn nắm đượ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 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. Bên trong thẻ Layout (Bố cục), chọn Hiển thị số dòng trong trình đơn thả xuống để xem số dòng trên lưới của bạn.

Từ khoá đặt kích thước nội tại

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

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

min-content từ khoá sẽ tạo một bản nhạc nhỏ nhất có thể mà không bị tràn nội dung bản nhạc. Thay đổi bố cục lưới mẫu để có 3 kênh theo dõi cột ở kích thước min-content sẽ có nghĩa là từ đó hẹp như từ dài nhất trong bài hát.

max-content từ khoá có tác độ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 liên tục. Điều này có thể gây ra tràn vì chuỗi sẽ không gói.

fit-content() hoạt động như max-content lúc ban đầu. Tuy nhiên, khi kênh đạt đến kích thước mà bạn chuyển vào hàm này, nội dung bắt đầu xuống dòng. Vì vậy, fit-content(10em) sẽ tạo một bản nhạc có thời lượng dưới 10 em, 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 kích thướ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ó kích thước độ dài hiện tại, tỷ lệ phần trăm và cả các từ khoá mới này. Ngoài ra còn có một phương thức định kích thước đặc biệt chỉ hoạt động trong bố cục lưới. Đây là đơn vị fr, độ dài linh hoạt mô tả một phần không gian có sẵn trong vùng chứa lưới.

Đơn vị fr hoạt động theo cách tương tự như sử dụng flex: auto trong hộp linh hoạt. Lớp này sẽ phân bổ không gian sau khi các mục đã được bố trí. Do đó, để có ba cột mà tất cả đều nhận được cùng một phần không gian có sẵn:

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

Khi đơn vị fr chia sẻ không gian có sẵn, nó có thể được kết hợp với khoảng cách 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 với phần tử có kích thước cố định và bản âm thanh thứ hai chiếm bất kỳ khoảng trống nào còn lại, bạn có thể sử dụng làm danh sách theo dõi 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ị càng lớn thì càng có nhiều không gian trống. Trong bản minh hoạ dưới đây, hãy thay đổi giá trị của bản nhạc thứ ba.

Hàm minmax()

Hàm này cho phép bạn đặt kích thước tối thiểu và tối đa cho bản nhạc. Việc này có thể khá hữu ích. Nếu chúng ta lấy ví dụ về đơn vị fr ở trên giúp phân phối dung lượng còn lại, có thể được viết ra bằng cách sử dụng minmax() trong vai minmax(auto, 1fr). Lưới xem xét kích thước nội tại của nội dung, sau đó phân bổ không gian có sẵn sau khi cung cấp đủ chỗ cho nội dung. Tức là có thể bạn sẽ không thấy được những bản nhạc mà mỗi bản nhạc đều có tỷ lệ chia sẻ như nhau tất cả không gian có sẵn trong vùng chứa lưới.

Để buộc một bản nhạc chiếm một phần không gian bằng nhau trong vùng chứa lưới trừ đi các khoảng trống, hãy sử dụng giá trị tối thiểu. Thay thế 1fr làm kích thước kênh bằng minmax(0, 1fr). Điều này tạo ra kích thước tối thiểu của bản nhạc bằng 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 của bạn.

Ký hiệu repeat()

Nếu bạn muốn tạo một lưới gồm 12 cột có 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 ra bằng cách sử dụ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 trang thông tin kênh. Ví dụ: bạn có thể lặp lại một mẫu 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 xác định kích thước theo dõi, minmax() rồi 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 các bản nhạc cột, nhưng thay vào đó, bạn nên tạo bao nhiêu tuỳ ý phù hợp với vùng chứa của mình.

Bạn có thể đạt được điều này bằng cách sử dụng repeat() và từ khoá auto-fill hoặc auto-fit. Trong bản minh hoạ bên dưới lưới, bạn sẽ tạo ra số lượng bản nhạc 200 pixel sao cho phù hợp với vùng chứa. Mở bản minh hoạ trong 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 phần minh hoạ, chúng ta sẽ nhận được nhiều bản nhạc phù hợp nhất có thể. Tuy nhiên, các kênh này không linh hoạt. Bạn sẽ nhận được một khoảng trống ở cuối cho đến khi có đủ chỗ cho bản nhạc 200 pixel khác. Nếu bạn thêm hàm minmax(), Bạn có thể yêu cầu số lượng bản nhạc tuỳ ý với kích thước tối thiểu là 200 pixel và tối đa là 1fr. Sau đó, Grid sẽ bố trí các đường đi 200 pixel và bất kỳ khoảng trống nào còn lại sẽ được phân bổ đồng đều cho chúng.

Thao tác này sẽ tạo bố cục thích ứng hai chiều mà không cần bất kỳ truy vấn nội dung nghe nhìn nào.

Có sự khác biệt nhỏ giữa auto-fill và auto-fit. Trong phần minh hoạ tiếp theo, hãy chơi bố cục lưới bằng cú pháp đã giải thích ở trên, nhưng chỉ có hai mục lưới trong vùng chứa lưới. Bằng cách sử dụng từ khoá auto-fill, bạn có thể thấy rằng các kênh trống đã được tạo. Thay đổi từ khoá thành auto-fit và các bản nhạc sẽ thu gọn về kích thước bằng 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.

Các từ khoá auto-fill và auto-fit sẽ hoạt động theo cách hoàn toàn tương tự. Không có sự khác biệt giữa các biến thể này sau khi kênh đầu tiên được lấp đầy.

Chuyển vị trí tự động

Tới nay, bạn đã thấy tính năng tự động thay đổi vị trí lưới đang hoạt động trong các bản minh hoạ. Các mục được đặt trên lưới, mỗ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 kiểm soát nhiều hơn, bạn có thể làm một số việc sau. Đầu tiên là để tinh chỉnh bố cục vị trí tự động.

Sắp xếp 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ác cột bằng grid-auto-flow: column. Bạn cần xác định các kênh theo dõi hàng, nếu không các mục này sẽ tạo ra các kênh nội tại của cột, và bố trí tất cả trong một hàng dài.

Các giá trị này liên quan đến chế độ viết của tài liệu. Hàng luôn chạy theo hướng mà câu chạy trong 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 giá trị của chế độ (grid-auto-flow) và thuộc tính writing-mode.

Mở rộng các kênh

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 rộng trên nhiều kênh. Sử dụng từ khoá span cùng với số dòng để kéo dài dưới dạng 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 */
}

Như bạn chưa chỉ định grid-column-start, phương thức này sử dụng giá trị ban đầu là auto và được đặt theo quy tắc đặt vị trí tự động. Bạn cũng có thể chỉ định điều tương tự bằng cách sử dụng cách 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ên nhiều kênh có thể sẽ dẫn đến lưới có một số ô không được lấp đầy. Hành vi mặc định của bố cục lưới với bố cục được đặt hoàn toàn tự động chính là luôn tiến về phía trước. Các mục này sẽ được đặt theo thứ tự xuất hiện trong nguồn, hoặc bất kỳ sửa đổi nào với thuộc tính order. Nếu không có đủ không gian để đặ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 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 gán giá trị dense cho grid-auto-flow. Với giá trị này, lưới sẽ lấy các mục vào lúc khác trong bố cục và sử dụng chúng để lấp đầy khoảng trống. Điều này có nghĩa là màn hình bị ngắt kết nối khỏi thứ tự logic.

Đang đặt hàng

Bạn đã có rất nhiều chức năng từ Lưới CSS. Hãy cùng tìm hiểu cách chúng ta sắp xếp 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 một lưới gồm các đường được đánh số. Cách đơn giản nhất để đưa các mục lên lưới là sắp xếp chúng 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ố đó.

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

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

Các dòng chữ này có cách viết tắt cho phép bạn đặt cả dòng bắt đầu và dòng kết thúc cùng lúc:

• grid-column
• grid-row

Để đặt mục, hãy đặt các đường bắt đầu và kết thúc của vùng lưới mà bạn muốn đặt mục đó 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ụ của Chrome cho nhà phát triển có thể cung cấp cho bạn hướng dẫn bằng hình ảnh về các dòng để kiểm tra vị trí đặt mục của bạn.

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 vị trí của các mục luôn nhất quán với cách văn bản luân chuyển.

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

Khi sử dụng tính năng định vị theo đường kẻ, 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 nhóm các mục, hoặc khiến một mục chồng chéo lên một phần mục khác. Các mục xuất hiện sau trong nguồn sẽ hiển thị ở 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ư đối với các mục đã được định vị.

Số dòng âm

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

Đôi khi, bạn sẽ có 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 phần tử theo dõi cột rồi thêm một số hàng của các mục trong lưới mà không cần xác định các phần tử theo dõi hàng. Các tuyến đường sẽ được tự động định kích thước theo mặc định. Bạn cũng có thể đặt một mục bằng cách sử dụng grid-column-end nằm 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 để giúp bố cục hoạt động, và những kênh này được gọi là lưới ngầm ẩn.

Trong hầu hết trường hợp, việc này sẽ không tạo ra sự khác biệt nếu bạn đang làm việc với một lưới ngầm ẩn hoặc tường minh. 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 loại 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 rõ ràng. Cách này có thể hữu ích nếu bạn muốn một mục trải dài từ dòng đầ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 dài ra ngay trên lưới rõ ràng.

Tuy nhiên, cách này chỉ áp dụng cho lưới rõ ràng. Tạo bố cục gồm ba hàng các mục được đặt tự động nơi bạn muốn mục đầu tiên trải dài đến dòng cuối của lưới.

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

Định kích thước bản nhạc ngầm

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

Cách tạo tất cả các hàng ngầm ẩn có 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 với mẫu gồm các bản nhạc rộng 100px và 200px. Trong trường hợp này, cột ngầm ẩn đầu tiên sẽ là 100px, 200px thứ hai, 100px thứ ba, v.v.

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

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

Việc này có thể giúp bạn dễ dàng đặt các mục vào một bố cục hơn nếu các dòng có tên thay vì số. Bạn có thể đặt tên cho bất kỳ đường nào trên lưới bằng cách thêm tên bạn chọn trong các dấu ngoặc vuông. Bạn có thể thêm nhiều tên, được phân tách bằng dấu cách trong cùng một dấu ngoặc. Sau khi bạn đã đặt tên cho các dòng, chúng có thể được sử dụng thay cho 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 thú vị vì nó cho phép bạn xem thành phần của mình trông như thế nào ngay trong CSS.

Để bắt đầu, hãy đặt tên cho thành phần con trực tiếp của vùng chứa lưới bằng phương thức 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 thích ngoài từ khóa auto và span. Sau khi đặt tên cho tất cả các mục, sử dụng grid-template-areas để xác định các ô lưới mà mỗi mục sẽ trải rộng. 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 vài quy tắc khi sử dụng grid-template-areas.

• Giá trị phải là một lưới hoàn chỉnh không có ô trống.
• Hãy lặp lại tên này để mở rộng các bản nhạc.
• Các khu vực được tạo bằng cách lặp lại tên phải là 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ị được coi là không hợp lệ và bị loại bỏ.

Để chừa khoảng trắng trên lưới, hãy sử dụng một hoặc nhiều . không có khoảng trắng giữa chúng. 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ủa bạn được xác định ở cùng một nơi, nó giúp bạn dễ dàng xác định lại bố cục bằng các truy vấn nội dung nghe nhìn. Trong ví dụ tiếp theo, tôi đã tạo một bố cục 2 cột chuyển thành 3 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 cửa sổ mới để xem kích thước khung nhìn và xem sự thay đổi về bố cục.

Bạn cũng có thể thấy mối liên hệ giữa thuộc tính grid-template-areas với writing-mode và hướng, giống như 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 đặt nhiều thuộc tính lưới cùng một lúc. Các khái niệm 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 đi cùng với nhau. Việc bạn muốn dùng hay thích sử dụng tay dài là tuỳ thuộc vào bạn.

grid-template

grid-template thuộc tính là cách viết tắt của grid-template-rows, grid-template-columns và grid-template-areas. Các hàng được xác định đầu tiên, cùng với giá trị của grid-template-areas. Kích thước cột sẽ được thêm 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

grid có thể sử dụng cách viết tắt giống hệt như cách viết tắt grid-template. Khi được sử dụng theo cách này, phương thức này sẽ đặt lại các thuộc tính lưới khác mà chấp nhận về giá trị ban đầu. Toàn bộ tập hợp 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ùng các thuộc tính căn chỉnh mà 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 cùng dòng, hướng mà câu chạy trong chế độ viết của bạn.

Các thuộc tính bắt đầu bằng align- được dùng trên trục khối, hướng bố trí các khối 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 đường đi.
• 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 vùng lưới đặt mục đó.
• 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 cho các mục.

Phân phối thêm dung lượng

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

Lưu ý cách khoảng cách trở nên lớn hơn khi sử dụng các giá trị như space-between, và bất kỳ mục trong lưới nào trải rộng trên hai kênh cũng sẽ phát triển để hấp thụ thêm không gian 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 vùng lưới đượ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 điều này thay đổi bố cục như thế nào. 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 kiến thức

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

main {
  display: grid;
}

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 trong thông số kỹ thuật bố cục lưới. Để tìm hiểu thêm, hãy xem các tài nguyên sau.

• Bố cục lưới CSS MDN
• Hướng dẫn đầy đủ về lưới
• Tạo vùng chứa lưới
• Kiểm tra lưới CSS trong Công cụ của Chrome cho nhà phát triển
• Bộ sưu tập toàn diện tài liệu học tập theo dạng lưới