Podcast CSS – 011: Lưới
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 thức để giải quyết bố cục này, nhưng với lưới CSS, nó không chỉ tương đối đơn giản mà cò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 khả năng kiểm soát mà kích thước bên ngoài mang lại với tính linh hoạt của định kích thước nội tại, đây là tính năng 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à sắp xếp mọi thứ 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 lưới 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 ô bạn đã tạo. Có rất nhiều thứ để tạo bố cục lưới, nhưng với tổng quan về những gì có sẵn, bạn sẽ nhanh chóng tạo được 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ả những yếu tố đó trong hướng dẫn này.
- 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 kích thước các bản nhạc hàng và cột này hoặc chúng có thể phản ứng với kích thước của nội dung.
- 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.
- Hoặc bạn có thể đặt các mục ở vị trí chính xác mà mình muốn.
- Bạn có thể đặt tên cho các đường và vùng trên lưới để đặt vị trí dễ dàng hơn.
- Không gian trống trong vùng chứa lưới có thể được phân bổ giữa các bản nhạc.
- 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ữ 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ó hệ thống bố cục thực.
Đường lưới
Lưới bao gồm các đường kẻ, chạy theo chiều ngang và chiều dọc. Nếu lưới của bạn có 4 cột, thì lưới đó sẽ có 5 dòng, bao gồm cả 1 dòng sau cột cuối cùng.
Các dòng được đánh số bắt đầu từ 1, với việc đánh số theo chế độ viết 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ẽ hiển thị ở bên trái bằng ngôn ngữ từ trái sang phải như tiếng Anh, còn dòng bên phải bằng ngôn ngữ đọc từ phải sang trái như tiếng Ả Rập.
Đường lưới
Đường đi là khoảng không giữa hai đường lưới. Đường dẫn hàng nằm giữa hai dòng hàng và một đường theo cột nằm giữa hai dòng cột. Khi tạo lưới, chúng ta tạo các kênh này bằng cách gán 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ởi phần giao nhau của các đường hàng và cột. Nó chỉ giống như ô trong bảng hoặc ô 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 bố trí một mục vào từng ô lưới đã xác định.
Vùng lưới
Một số ô lưới với nhau. Vùng lưới được tạo bằng cách làm cho một mục trải rộng trên nhiều tuyến đường.
Khoảng trống
Máng xối hoặc hẻm giữa các bản nhạc. Nhằm mục đích định kích thước, các đoạn 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ể kéo dài các mục lưới trên đó.
Vùng chứa lưới
Phần tử HTML đã áp dụng display: grid, do đó, tạo ra 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 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ó 3 kênh cột, 2 kênh theo 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 họa nhiều nội dung được mô tả trong phần thuật ngữ. Báo cáo này có ba theo dõi cột. Mỗi bản nhạc sử dụng một đơn vị thời lượng khác nhau. Ứng dụng này có hai hàng bài hát, một hàng sử dụng đơn vị chiều dài và hàng còn lại tự động. Khi được dùng làm tính năng tự động định cỡ bản nhạc, hệ thống có thể coi kích thước này là lớn bằng nội dung. Các bản nhạc được định kích thước tự động theo mặc định.
Nếu phần tử thuộc lớp .container có các mục con, thì các mục đó 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ế ở 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 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.
Bên trong thẻ Bố cục,
hãy chọn Số dòng hiển thị trong trình đơn thả xuống để xem số dòng trên lưới của bạn.
Từ khoá định 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ư mô tả trong phần về đơ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ỹ thuật Box Sizing và thêm các phương thức bổ sung để định cỡ hộp trong CSS, chứ không chỉ các đường lưới.
min-contentmax-contentfit-content()
Từ khoá min-content giúp tạo một bản nhạc có kích thước nhỏ nhất có thể mà không bị tràn nội dung bản nhạc.
Việc thay đổi bố cục lưới trong ví dụ thành có 3 cột theo dõi tất cả đều có kích thước min-content, đồng nghĩa với việc các từ đó trở nên hẹp bằng 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 liên tục.
Điều này có thể gây ra tình trạng tràn vì chuỗi sẽ không xuống dòng.
Ban đầu, hàm fit-content() hoạt động như max-content.
Tuy nhiên, khi kênh đạt đến kích thước mà bạn truyền vào hàm, nội dung sẽ bắt đầu bao bọc.
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 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 đường lưới.
Đơn vị fr
Chúng tôi hiện có các phương diện, tỷ lệ phần trăm thời lượng và 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ỉ áp dụng cho bố cục lưới.
Đây là đơn vị fr, có độ 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ư việc sử dụng flex: auto trong flexbox.
Phân bổ không gian sau khi các mục đã được bố trí.
Do đó, để có 3 cột đều có cùng tỷ lệ 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 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 kích thước cố định.
Để có một thành phần có phần tử kích thước cố định và bản nhạc thứ hai chiếm bất kỳ dung lượ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ệ. Những giá trị lớn hơn nên có nhiều không gian trống hơn. 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 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 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, thì bạn có thể viết ra đơ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 cho nội dung đủ chỗ.
Điều này có nghĩa là bạn có thể không thấy các kênh mà mỗi kênh có một phần bằng nhau về tổng 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 bằng nhau không gian trong vùng chứa lưới trừ đi khoảng trống, hãy sử dụng minmax.
Thay thế 1fr làm kích thước bản nhạc 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 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 muốn tạo lưới theo dõi 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 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 danh sách kênh của bạn.
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 định kỳ.
.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 đã tìm hiểu về việc định kích thước bản nhạc, minmax() và lặp lại thao tác này để tạo ra 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 cột,
mà thay vào đó, bạn muốn tạo nhiều tập nhất có thể cho 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, hệ thống sẽ tạo ra nhiều bản nhạc 200 pixel cho vừa 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 bản minh hoạ, chúng ta có nhiều bản nhạc phù hợp nhất.
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ó đủ dung lượng cho bản nhạc 200 pixel khác.
Nếu thêm hàm minmax(), bạn có thể yêu cầu số lượng bản nhạc 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 bản nhạc 200 pixel và phần không gian còn lại sẽ được phân bổ đồng đều cho các bản nhạc đó.
Điều này sẽ tạo bố cục đáp ứng hai chiều không cần bất kỳ truy vấn phương tiện nào.
Có sự khác biệt nhỏ giữa auto-fill và auto-fit.
Ở bản minh hoạ tiếp theo, hãy phát bố cục lưới theo 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.
Khi 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ừ khóa thành auto-fit để các kênh sẽ thu gọn về kích thước 0.
Nghĩa là các kênh linh hoạt hiện sẽ phát triển để sử dụng không gian quảng cáo.
Các từ khoá auto-fill và auto-fit hoạt động theo cách giống hệt nhau.
Không có sự khác biệt giữa hai chỉ số này sau khi kênh đầu tiên được lấp đầy.
Vị trí tự động
Đến nay, bạn đã thấy tính năng tự động đặt vị trí dạng lưới hoạt động trong các bản minh hoạ. Các mục được đặt trên lưới vớ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. Trước tiên là điều chỉnh bố cục tự động đặt vị trí.
Đặ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 các hàng.
Thay vào đó, bạn có thể đặt các mục vào cột bằng cách sử dụng grid-auto-flow: column.
Bạn cần xác định các đường theo hàng, nếu không, các mục sẽ tạo các đường theo 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 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.
Kéo dài bản nhạc
Bạn có thể làm cho một số hoặc tất cả các mục trong bố cục đặt tự động trải dài ra nhiều kênh.
Sử dụng từ khoá span cùng với số lượng dòng cần kéo dài 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 lớp 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 cùng một nội dung 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ải rộng trên nhiều bản nhạc có thể dẫn đến một lưới có một số ô chưa được điền.
Hành vi mặc định của bố cục lưới với bố cục được đặt tự động hoàn toàn là luôn tiến về phía trước.
Các mục sẽ được đặt theo thứ tự của chúng trong nguồn hoặc theo bất kỳ nội dung sửa đổi nào đối với thuộc tính order.
Nếu không có đủ không gian để vừa một mục, lưới sẽ để lại một khoảng trống và chuyển sang bản nhạc 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.
Khi giá trị này được thiết lập, 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ó nghĩa là màn hình bị ngắt kết nối khỏi thứ tự logic.
Đặt hàng
Bạn đã có rất nhiều chức năng của Lưới CSS. Bây giờ, hãy xem cách đặt 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 dòng được đánh số. Cách đơn giản nhất để đưa các nội dung vào lưới là đặt 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 các 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:
Chúng có các cú pháp 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 một lúc:
Để đặt mục của bạn, hãy đặt đường bắt đầu và đường kết thúc của vùng lưới nơi mục cần đượ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ụ 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ế độ viết và hướng của thành phần. Trong bản minh hoạ tiếp theo, hãy thay đổi hướng hoặc chế độ viết để xem vị trí của các mục nhất quán như thế nào với cách văn bản di chuyển.
Xếp các mục
Bằng cách sử dụng tính năng định vị dựa trên đườ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 chồng các mục hoặc khiến một mục chồng lên một phần khác.
Các mục xuất hiện sau đó trong nguồn sẽ được hiển thị ở đầu 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 tương tự như với các mục đã được định vị.
Số dòng âm
Khi tạo một lưới bằng grid-template-rows và grid-template-columns, bạn sẽ tạo một lưới được gọi là lưới tường minh (explicit).
Đây là lưới mà bạn đã xác định và đặt kích thước cho các bản nhạc.
Đô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 đường theo cột rồi thêm một vài hàng mục trong lưới mà không cần xác định các đường theo hàng.
Các bản nhạc sẽ được định kích thước tự động 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 bên ngoài lưới được xác định rõ ràng.
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 có gì khác biệt nếu bạn đang xử lý lưới ngầm ẩn hoặc rõ ràng. Tuy nhiên, với vị trí dựa trên dòng, bạn có thể gặp phải điểm khác biệt chính giữa hai loại quảng cáo này.
Bằng cách 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.
Điều này có thể hữu ích nếu bạn muốn một mục kéo dài từ dòng đầu tiên đến dòng cuối cùng trong cột.
Trong trường hợp đó, bạn có thể sử dụng grid-column: 1 / -1.
Mục này sẽ trải dài ngay trên lưới rõ ràng.
Tuy nhiên, cách này chỉ phù hợp với lưới rõ ràng. Tạo 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 rộng đến dòng cuối của lưới.
Bạn có thể nghĩ rằng bạn có thể cung cấp mục đó grid-row: 1 / -1.
Trong bản minh hoạ bên dưới, bạn có thể thấy rằng tính năng này không hiệu quả.
Các kênh được tạo trong lưới ngầm ẩn, nên không có cách nào để đến cuối lưới bằng -1.
Định kích thước kênh ngầm ẩn
Các kênh được tạo trong lưới ngầm sẽ được định kích thước tự động theo mặc định.
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 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 có 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, 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
Thao tác này có thể giúp bạn dễ dàng đặt các mục vào 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 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 trong cùng một dấu ngoặc vuông. Sau khi bạn đặt tên cho các dòng, bạn có thể sử dụng chú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*/
}
Vùng mẫu lưới
Bạn cũng có thể đặt tên cho các vùng 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 rất hiệu quả vì kỹ thuật này 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 các phần tử con trực tiếp của vùng chứa lưới bằng cách dù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 cứ điều gì bạn muốn ngoài các từ khóa 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 những ô lưới mà mỗi mục sẽ kéo dài.
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ị phải là một lưới hoàn chỉnh không có ô trống.
- Để mở rộng các tuyến đường, 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 ở dạng hình chữ nhật và không thể ngắt kết nối.
Nếu bạn vi phạm bất kỳ quy tắc nào ở trên, thì giá trị đó sẽ bị coi là không hợp lệ và sẽ bị loại bỏ.
Để để khoảng trắng trên lưới, hãy sử dụng một hoặc nhiều . hoặc bội số mà không có khoảng trắng ở giữa.
Ví dụ: để trống ô đầu tiên trên lưới, tôi có thể thêm một chuỗi 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 ở một nơi, nên việc xác định lại bố cục bằng các truy vấn phương tiện sẽ trở nên dễ dàng.
Trong ví dụ tiếp theo, tôi đã tạo bố cục hai cột chuyển thành 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 cửa sổ mới để xem kích thước khung nhìn và xem sự thay đổi bố cục.
Bạn cũng có thể thấy mối quan hệ giữa thuộc tính grid-template-areas với writing-mode và hướng, như với các phương thức lưới khác.
Thuộc tính viết tắt
Có 2 thuộc tính viết tắt cho phép bạn thiết lập nhiều thuộc tính của lưới cùng một lúc. Những 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 thức kết hợp. Việc bạn muốn sử dụng hay thích sử dụng tính năng cầm tay là tuỳ thuộc vào bạn.
grid-template
Thuộc tính grid-template 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 trước, cùng với giá trị của grid-template-areas.
Kích thước cột được thêm vào sau /.
.container {
display: grid;
grid-template:
"head head head" minmax(150px, auto)
"sidebar content content" auto
"sidebar footer footer" auto / 1fr 1fr 1fr;
}
grid cơ sở lưu trú
Bạn có thể sử dụng cú pháp viết tắt grid theo cách giống hệt như cách viết tắt grid-template.
Khi được 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.
Toàn bộ là:
grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow
Bạn có thể luân phiên 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, chẳng hạn như:
.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 tương tự 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 dùng trên trục cùng dòng, hướng mà câu chạy ở chế độ viết.
Các thuộc tính bắt đầu bằng align- được dùng trên trục khối, hướng mà các khối được bố trí ở chế độ viết.
justify-contentvà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-selfvàalign-self: áp dụng cho mục lưới để di chuyển mục đó xung quanh bên trong vùng lưới mà mục đó được đặt.justify-itemsvàalign-items: được áp dụng cho vùng chứa lưới để đặt tất cả thuộc tínhjustify-selftrên các mục.
Phân bổ thêm không gian
Trong bản minh hoạ này, lưới lớn hơn không gian cần để bố trí các tuyến đường 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ử các giá trị khác nhau của align-content và justify-content để xem cách hoạt động của kênh.
Bạn cần lưu ý rằng khoảng trống trở nên lớn hơn khi sử dụng các giá trị như space-between, đồng thời bất kỳ mục lưới nào trải rộng trên hai kênh cũng phát triển để hấp thụ thêm không gian bổ sung vào khoảng trống đó.
Di chuyển nội dung xung quanh
Các mục có màu nền có vẻ như lấp đầy hoàn toàn vùng 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 giá trị này thay đổi bố cục như thế nào.
Vùng 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 của bạn
Kiểm tra kiến thức của bạn về lưới
Câu nào sau đây là thuật ngữ về lưới CSS?
main {
display: grid;
}
Hướng bố cục mặc định của lưới là gì?
grid-auto-flow: column thì lưới sẽ bố cục dưới dạng cột.Có gì khác biệt giữa gói auto-fit và gói auto-fill?
auto-fit sẽ kéo dài 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 vào mẫu nhất có thể mà không kéo giãn. Fit làm cho chúng phù hợp.auto-fit sẽ kéo dài vùng chứa để vừa với phần tử con, trong đó auto-fill làm cho phần tử con vừa với vùng chứa.min-content là gì?
min-content là giá trị tương đối với các từ và hình ảnh trong hộp.min-content đang đề cập đến.min-content.max-content là gì?
max-content đang đề cập đến.min-content.Vị trí tự động là gì?
grid-area và được đặt trê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 trong thông số kỹ thuật của bố cục lưới. Để tìm hiểu thêm, hãy xem các tài nguyên sau.