Giới thiệu về Bố cục lưới CSS. Cách tạo bố cục lưới CSS đáp ứng. Chỉ định khu vực mẫu và thử nghiệm

Chúng tôi sẽ cho bạn biết cách CSS Grid cho phép bạn tạo đánh dấu phản hồi chất lượng cao mà không cần dùng đến các khung của bên thứ ba như Bootstrap.

Lưới gốc cung cấp nhiều lợi thế hơn các khung, đặc biệt là khi so sánh với khung phổ biến nhất trong số chúng: Bootstrap. Vì CSS hiện đại cho phép bạn tạo các đánh dấu phức tạp mà không cần JavaScript nên mã của bạn sẽ sạch hơn và dễ bảo trì hơn.

Đánh dấu có thể đơn giản hơn

Thay thế Bootstrap bằng CSS Grid sẽ làm được HTML sạch hơn. Ví dụ: hãy xem xét một phần nhỏ của trang mà chúng ta phải bố cục, nó trông như thế này:

Khởi động

Trước tiên, hãy xem mã ví dụ cho trang này trong Bootstrap.

Có một số điều cần chú ý:

— Mỗi hàng phải được đặt trong div riêng của nó.
- Bạn phải sử dụng tên lớp để tạo đánh dấu (col-xs-2).
— Khi mẫu phát triển và trở nên phức tạp hơn, điều tương tự cũng sẽ xảy ra với mã HTML.

Nếu chúng ta nói về khả năng phản hồi, đánh dấu sẽ còn tệ hơn:

Lưới CSS

Bây giờ chúng ta hãy xem ví dụ tương tự về đánh dấu trong CSS thuần túy:

Đánh dấu này dễ đọc hơn nhiều. Sự lộn xộn của các lớp không còn nữa và số lượng div đã giảm đi.

Tất nhiên, không giống như ví dụ với Bootstrap được kết nối với trang, ở đây bạn cần tự mình mô tả các kiểu:

Linh hoạt hơn

Hãy làm việc dựa trên khả năng thích ứng. Ví dụ: hãy xóa MENU khỏi hàng đầu dành cho màn hình di động. Nói cách khác, hãy thay đổi điều này:

Lưới CSS

Việc xây dựng lại lưới CSS rất dễ dàng. Tất cả những gì bạn cần làm chỉ đơn giản là thêm truy vấn phương tiện và mô tả điều gì sẽ xảy ra với các thành phần trang.

Bằng cách này, bạn thậm chí không cần phải mở HTML để thiết kế lại trang.

Khởi động

Nếu nhà phát triển cần thay đổi điều gì đó trong mẫu Bootstrap, anh ta sẽ phải bắt đầu bằng cách thay đổi chính HTML. Trên thực tế, bạn cần di chuyển MENU sao cho nó ở trên HEADER.

Trong trường hợp này, việc chỉ thay đổi hành vi của kiểu trong truy vấn phương tiện sẽ không hiệu quả. Để giải quyết vấn đề này, bạn cần dùng đến JavaScript.

Không còn giới hạn 12 cột

Không phải đây là hạn chế nghiêm trọng nhưng trong một số trường hợp nó gây ra sự bất tiện. Bởi vì Lưới khởi động về cơ bản được chia thành 12 cột, các vấn đề có thể phát sinh khi chia, ví dụ: thành 5, 7 hoặc 9 cột.

CSS Grid cho phép bạn tạo bao nhiêu cột liên tiếp tùy ý.

Điều này được thực hiện bằng cách đặt giá trị của thuộc tính Grid-template-columns:

Nhân tiện, nó sử dụng flexbox, điều này cũng cho phép bạn dễ dàng quản lý đánh dấu thông qua CSS, nhưng trên khoảnh khắc này Nó thậm chí còn chưa hết beta.

Hỗ trợ trình duyệt

Vào thời điểm viết bài này, 75% trình duyệt hỗ trợ CSS Grid.

Không có gì ngăn cản nhiều nhà phát triển bắt đầu sử dụng CSS Grid ngay bây giờ, nhưng thật không may, không phải tất cả các dự án đều sẵn sàng hoạt động với phương pháp bố cục này. Tuy nhiên, nhiều nhà phát triển nổi tiếng, chẳng hạn như Morten Rand-Eriksen của LinkedIn và Jen Simmons của Mozilla, tin chắc rằng phương pháp thiết kế trang này là tương lai: cách trình bày trực quan phải được tách biệt khỏi logic JavaScript và thích ứng độc lập với nó.

Trong bài viết này bạn sẽ tìm thấy khóa học đầy đủ bằng lưới CSS. Chúng ta sẽ xem nó là gì, sự khác biệt với FlexBox là gì và cách bạn có thể làm việc với CSS Grid.

Lưới CSS là cách tiếp cận mớiđể tạo các trang web thích ứng với nhiều khối nằm ở bất kỳ đâu trên trang web. Bên cạnh đó Lưới CSS Ngoài ra còn có một công nghệ rất giống với mắt lưới. Chúng tôi sẽ không đi sâu vào những khác biệt nhỏ nhất giữa chúng, vì điều này sẽ cần một bài viết riêng, nhưng chúng tôi sẽ mô tả ngắn gọn những khác biệt chính.

Lưới CSS có thể gọi là phiên bản ngầu hơn và cải tiến hơn FlexBox, vì FlexBox cho phép bạn chỉ làm việc trên một mặt phẳng: tạo cột hoặc tạo hàng.

Lưới CSS cho phép bạn làm được nhiều việc hơn vì chúng hoạt động trên cả hai mặt phẳng cùng một lúc. Do đó, việc tạo các khối trang web thích ứng dễ dàng hơn nhiều và khả năng sắp xếp các đối tượng theo ý muốn đơn giản là vô tận.

Mời bạn xem video đầy đủ về cách học CSS Grid để hiểu ngay bản chất Lưới CSS:

• Bài học về ;

Trong bài học, ba trang đã được tạo, mã cho mỗi trang có thể được sao chép bên dưới.

tập tin đầu tiên

Tệp thứ hai

Tệp thứ ba

Nguyên lý hoạt động

Làm việc với lưới rất đơn giản. Thuật toán hành động ở đây như sau:

1. Chúng tôi tạo một khối chính và đặt các khối khác vào đó ( phần);
2. Thêm thuộc tính display:grid vào khối chính;
3. Thuộc tính lưới CSS hiện có thể được áp dụng cho tất cả các thành phần khối chính;
4. Thêm các thuộc tính khác nhau. Bạn có thể tìm thấy tài liệu về tất cả các thuộc tính có thể có;

Mỗi khối có thể được đặt theo chiều rộng, chiều cao và vị trí. Các khối được tạo dựa trên lưới ngay lập tức có thiết kế thích ứng, giúp điều chỉnh các khối theo các độ phân giải màn hình khác nhau.

Bằng cách này bạn có thể viết ít hơn và nhận được nhiều hơn. Còn gì tuyệt vời hơn nữa? Chia sẻ kinh nghiệm sử dụng lưới trong dự án của bạn trong phần bình luận cho bài viết này ⇣

Bài viết này cho thấy cách so sánh này công nghệ mới, nó hoạt động chứ không chỉ là mô tả các thuộc tính với các ví dụ hời hợt.

Bản thân bài viết này là bản dịch tăng cường đáp ứng của CSS Grid Tutorial

Mô-đun CSS Grid được Nhóm làm việc CSS phát triển để cung cấp cách tốt nhất để tạo mẫu trong CSS. Nó đã được đưa vào Khuyến nghị của Ứng viên vào tháng 2 năm 2017 và các trình duyệt chính bắt đầu hỗ trợ nó vào tháng 3 năm 2017.

CSS Grid sẽ sớm trở thành một phần không thể thiếu trong bộ công cụ của bất kỳ nhà phát triển front-end nào. Và nếu bạn là một trong số họ, thì bạn sẽ phải học CSS Grid — đây gần như chắc chắn sẽ là một kỹ năng không thể thương lượng đối với bất kỳ vị trí phát triển front-end nào.

Với chức năng mạnh mẽ và cú pháp trực quan này, các mẫu lưới chắc chắn sẽ thay đổi cách xây dựng web.

Giới thiệu

Lưới CSS là người mẫu mới mẫu, được tối ưu hóa cho các mẫu hai chiều. Đó là mô hình lý tưởng cho các mẫu trang web, biểu mẫu, phòng trưng bày và bất kỳ thứ gì yêu cầu định vị chính xác và đáp ứng.

Với sự phát triển của web ở những năm trước, việc phát triển các mẫu trang web ngày càng trở nên khó khăn. TRONG những năm đầu web, bảng HTML thường được sử dụng cho các mẫu, biểu mẫu nhiều cột, v.v. Nhưng phương pháp này có nhược điểm của nó. Điều này có nghĩa là bản trình bày phải được thực hiện ở cấp độ đánh dấu, do đó không có sự phân biệt giữa bản trình bày và nội dung. Trên thực tế, các bảng được tạo ra để chứa dữ liệu dạng bảng chứ không phải để tạo mẫu. Và không cần chạm vào vấn đề ngữ nghĩa, các mẫu bảng không được tạo cho thiết kế đáp ứng.

Floats cuối cùng đã thay thế các mẫu bảng như một phương pháp được chấp nhận và đề xuất rộng rãi để tạo mẫu, vì nó cho phép chúng ta định vị các phần tử một cách độc lập với bố cục. Tuy nhiên, cho đến nay phương pháp này được coi là một cải tiến đáng kể trên nền bố cục dạng bảng, nó cũng có những hạn chế của nó. Phao được thiết kế chủ yếu cho các mẫu tài liệu và không phù hợp với các mẫu ứng dụng phức tạp hiện phổ biến trên web. Các phần tử nổi khó kiểm soát, đặc biệt là trên các thiết bị và khung nhìn kích cỡ khác nhau. Điều này dẫn đến nhiều vụ hack giống như lưới khác nhau đã trở thành tiêu chuẩn, hầu hết chúng đều yêu cầu đánh dấu bổ sung làm mất đi toàn bộ khái niệm tách nội dung. Vì vậy Nhóm làm việc CSS đang tìm kiếm một giải pháp tốt hơn.

Mô hình CSS Grid giải quyết những vấn đề này và hơn thế nữa. Nó cho phép bạn tạo các mẫu nâng cao trong một khoảng thời gian ngắn mà bạn sẽ dành cho chúng với các nhóm và ít mã hóa hơn.

Nhưng tất nhiên người ta có thể sử dụng những nghĩa khác nhau, chẳng hạn như 100px , 7em , 30%, v.v. Bạn cũng có thể gán tên cho chuỗi cùng với kích thước của chúng.

cột-mẫu-cột: 1fr 1fr 1fr

Tương tự như trên, chỉ xác định các cột trong lưới.

Để lộ một khoảng trống. Đó là khoảng cách giữa các phần tử lưới. Ở đây, chúng tôi sử dụng đơn vị chiều dài vw, tương ứng với chiều rộng của khung nhìn, nhưng chúng tôi cũng có thể sử dụng 10px, 1em, v.v. Thuộc tính Grid-gap là viết tắt của Grid-row-gap và Grid-column-gap của cải.

Chà, phần còn lại của mã chỉ đơn giản là gán những phong cách khác các phần tử lưới.

#lưới >

hàm lặp lại()

Bạn có thể sử dụng hàm lặp lại() để thực hiện các khai báo lặp lại về giá trị kích thước của một phần tử. Ví dụ: thay vì làm điều này:

Hàng mẫu lưới: 1fr 1fr 1fr 1fr 1fr;

Chung ta co thể lam được việc nay:

Lưới-mẫu-hàng: lặp lại (5, 1fr);

Điều này sẽ làm giảm đáng kể số lượng mã bạn cần viết, đặc biệt nếu bạn đang làm việc với các lưới lớn và lặp lại.

Tạo mẫu trang web bằng lưới CSS

Lưới bao gồm cú pháp "đồ họa ASCII" trực quan trong đó bạn hầu như có thể "nhìn thấy" mẫu trong mã, giúp bạn dễ dàng tạo và sửa đổi mẫu của mình. Ngay cả những thay đổi đáng kể có thể được thực hiện trong vài giây. Cú pháp trực quan này cũng giúp với thiết kế web đáp ứng. Tạo các mẫu khác nhau cho các thiết bị khác nhau trở nên dễ dàng hơn khi sử dụng lưới.

Bây giờ chúng ta hãy tạo một mẫu trang web trông như thế này:

Và đây là mã cho mẫu này:

Chúng ta hãy xem xét kỹ hơn mã của chúng tôi. Đánh dấu HTML trông như thế này:

Và vì vậy chúng tôi sẽ làm vùng chứa lưới, vì vậy tất cả các phần tử khác đều trở thành phần tử lưới.

Bây giờ hãy nhìn vào đồ họa ASCII mà chúng ta đã nói đến trước đây.

Grid-template-areas: “tiêu đề tiêu đề tiêu đề” “quảng cáo bài viết điều hướng” “chân trang chân trang chân trang”;

Phần này xác định mẫu của chúng tôi. Chỉ cần nhìn vào code chúng ta có thể thấy đó là một lưới 3x3 (ba hàng và ba cột). Điều này mang lại cho chúng ta năm vùng lưới trên chín ô lưới, vì một số vùng lưới trải rộng trên nhiều ô.

Chúng ta cũng thấy tiêu đề chiếm toàn bộ hàng đầu tiên trong số 3 ô, còn chân trang chiếm toàn bộ hàng dưới cùng, cũng chiếm 3 ô. Các phần điều hướng, nội dung và quảng cáo đều chia sẻ không gian ở hàng thứ hai, trong đó mỗi phần tử này có một ô.

Bây giờ chúng ta có thể gán từng vùng lưới này cho từng phần tử:

#pageHeader ( vùng lưới: tiêu đề; ) #pageFooter ( vùng lưới: chân trang; ) #mainArticle ( vùng lưới: bài viết; ) #mainNav ( vùng lưới: nav; ) #siteAds ( vùng lưới: quảng cáo; )

Thuộc tính vùng lưới là thuộc tính tốc ký cho phép bạn đặt các phần tử lưới trên lưới. Trong trường hợp của chúng tôi, chúng tôi chỉ tham chiếu đến các tên mà chúng tôi đã chỉ định trước đó trong vùng mẫu lưới.

Hầu hết các mẫu đã được hoàn thành. Phần còn lại của mã sẽ chỉ xử lý các kích thước, không gian và chiều cao, nói chung là một khu vực trang trí nhiều hơn.

Đoạn mã sau cung cấp kích thước của hàng và cột:

Lưới-mẫu-hàng: 60px 1fr 60px; lưới-mẫu-cột: 20% 1fr 15%;

Dòng đầu tiên và dòng thứ ba đều cao 60px và dòng thứ hai chiếm toàn bộ không gian còn lại.

Cột đầu tiên là 20% và cột thứ ba là 15%. Cái thứ hai chiếm hết không gian còn lại.

Thay đổi mẫu

Bạn có thể thay đổi mẫu một cách đơn giản bằng cách sắp xếp lại các vùng lưới trong Grid-template-areas .

Vì vậy, nếu chúng ta thay đổi điều này:

Grid-template-areas: “tiêu đề tiêu đề điều hướng” “quảng cáo bài viết điều hướng” “quảng cáo chân trang điều hướng”;

Kết quả là chúng ta có được mẫu sau:

Tuy nhiên, bạn có thể cần điều chỉnh kích thước nếu bạn di chuyển lưới nhỏ hơn đến vị trí lớn hơn.

Ví dụ: để làm điều này:

Điều hướng hiện chiếm không gian chứa nội dung, do đó kích thước đã được điều chỉnh. Nếu không, chúng ta sẽ có nội dung thu hẹp và điều hướng rộng. Vì vậy, mã bây giờ trông như thế này.

Grid-template-areas: “header header header” “quảng cáo điều hướng bài viết” /* Trước đó có “quảng cáo điều hướng bài viết” */ “footer footer footer”; lưới-mẫu-hàng: 60px 1fr 60px; lưới-mẫu-cột: 1fr 20% 15%; /* Trước đó là '20% 1fr 15%' */

Tạo lưới thích ứng

Mẫu lưới có các giá trị như tự động điền và tự động điều chỉnh cho phép bạn tạo một lưới có nhiều rãnh có kích thước nhất định sẽ vừa với một vùng chứa. Điều này có thể có nghĩa là lưới phản hồi nhanh, nghĩa là các phần tử thay đổi vị trí khi bạn thay đổi kích thước cửa sổ trình duyệt.

Ví dụ về sử dụng Tự động điền:

Đây là kết quả:

Mã chịu trách nhiệm cho việc này:

Cột mẫu lưới: lặp lại (tự động điền, minmax (150px, 1fr));

Trong đó, các cột có kích thước tối thiểu là 150px và tối đa không gian còn lại. Những bản nhạc như vậy sẽ được lặp lại nhiều lần nếu cần thiết để vừa với thùng chứa.

Hàm Repeat() lặp lại định nghĩa bản nhạc theo số lần được chỉ định bởi tham số đầu tiên. Việc sử dụng tính năng tự động điền sẽ khiến các bản nhạc lặp lại nhiều lần nhất có thể cho đến khi lấp đầy vùng chứa.

Kích thước của các bản nhạc này được chỉ định trong tham số thứ hai. Trong trường hợp của chúng tôi, chúng tôi sử dụng minmax(150px, 1fr) để chỉ ra rằng kích thước cột tối thiểu là 150px và tối đa là 1fr.

Tự động điều chỉnh

tính năng tự động điều chỉnh hoạt động giống như tính năng tự động điền. Sự khác biệt duy nhất ở đây là tính năng tự động điều chỉnh sẽ tập hợp tất cả các bản nhạc trống ở cuối vị trí, trong khi tính năng tự động điền thì không. Cách tốt nhất ở đây là trình diễn bằng so sánh.

Sử dụng hai phần tử lưới nhỏ ở đây sẽ giúp thể hiện được toàn bộ ý tưởng công việc. Tính năng tự động điền để lại các rãnh trống ở cuối theo kích thước đã chỉ định và tính năng tự động điều chỉnh sẽ kéo dài rãnh trống, dẫn đến các rãnh được lấp đầy bằng các phần tử bị kéo dài để lấp đầy khoảng trống.

Lưới có truy vấn phương tiện

Một trong những điểm mạnh của lưới là bạn có thể tạo một mẫu hoàn toàn khác chỉ trong vài giây.

Điều này làm cho lưới trở nên lý tưởng cho các truy vấn phương tiện. Chúng ta có thể chỉ cần gán lại các giá trị trong đồ họa ASCII và gói kết quả vào một truy vấn phương tiện.

Đây là mẫu ba cột trên khung nhìn lớn và được nén thành một cột duy nhất trên các thiết bị nhỏ. Vì vậy, ví dụ này sẽ trông khác nhau tùy thuộc vào kích thước màn hình. Trong mọi trường hợp, đây là mã có liên quan cho mẫu ba cột cho chế độ xem rộng.

Grid-template-areas: “tiêu đề tiêu đề tiêu đề” “quảng cáo bài viết điều hướng” “chân trang chân trang chân trang”;

Và đây là mã tương ứng cho phiên bản di động:

Khu vực mẫu lưới: “tiêu đề” “bài viết” “quảng cáo” “điều hướng” “chân trang”;

Vì vậy, toàn bộ vấn đề là gán lại các giá trị trong thuộc tính Grid-template-areas.

Trong trường hợp của chúng tôi, chúng tôi đã gói phiên bản di động trong một truy vấn phương tiện, như thế này:

@media all và (max-width: 575px) ( body ( Grid-template-areas: “tiêu đề” “bài viết” “quảng cáo” “nav” “chân trang”; lưới-template-rows: 80px 1fr 70px 1fr 70px; lưới- cột mẫu: 1fr; ) )

Xin lưu ý rằng chúng tôi cũng đã điều chỉnh các giá trị trong Grid-template-rows và Grid-template-columns để phù hợp với mẫu mới. Đặc biệt, chỉ nên có một cột và nó sẽ chiếm hết dung lượng trống. Và vì tất cả các phần tử lưới sẽ nằm trong một đống nên chúng tôi sẽ chỉ định 5 hàng và xác định chiều cao của chúng.

Kết hợp lưới với khối

Tùy thuộc vào yêu cầu mẫu của bạn, không có gì ngăn cản bạn thay đổi phiên bản di động thành display: block . Như ở đây:

@media all và (độ rộng tối đa: 575px) ( body ( display: block; ) )

Điều này sẽ hoạt động tương tự như trong ví dụ trên, nhưng theo mặc định, các phần tử sẽ xuất hiện theo thứ tự ban đầu. Trong ví dụ trên, phiên bản di động có điều hướng bên dưới quảng cáo, nhưng nếu chúng ta sử dụng display: block thì điều hướng sẽ ở trên quảng cáo.

Cũng bằng cách sử dụng phương pháp này, bạn cũng có thể cần thêm một số phần đệm để bù đắp cho việc thiếu khoảng trống có trong phiên bản lưới.

Lưới rõ ràng và ẩn

CSS Grid sử dụng khái niệm lưới rõ ràng và lưới ẩn. Đây là khái niệm quan trọng mà bạn cần phải cẩn thận khi tạo lưới, nếu không bạn sẽ có một loạt hàng và cột mà bạn không bao giờ ngờ tới.

Lưới rõ ràng là một lưới mà bạn xác định trong các hàng mẫu lưới, cột mẫu lưới và các vùng mẫu lưới.

Tuy nhiên, bạn vẫn có thể có các phần tử không vừa với lưới được xác định "rõ ràng" của mình. Ví dụ: bạn đã xác định một lưới chỉ có thể chứa sáu phần tử, nhưng bản thân vùng chứa thực sự được tạo thành từ chín phần tử. Chỉ có sáu phần tử sẽ phù hợp với lưới rõ ràng và ba phần tử sẽ vẫn còn. Và đó là lúc các lưới tiềm ẩn xuất hiện.

Lưới ngầm được tạo tự động bởi bộ chứa lưới bất cứ khi nào các phần tử lưới nằm bên ngoài lưới rõ ràng. Vùng chứa tạo các rãnh lưới ẩn bằng cách thêm các hàng ẩn vào lưới. Những đường này, cùng với các lưới rõ ràng, tạo thành các lưới ẩn. Đây là một ví dụ:

Trong ví dụ này, chúng tôi xác định rõ ràng hai hàng và hai cột sẽ chứa bốn thành phần lưới. Tuy nhiên, có sáu phần tử lưới, do đó, một lưới ẩn đã được tạo ra để chứa hai phần tử bổ sung.

Và điều này rất tốt. Nếu lưới ngầm chưa được tạo thì hai yếu tố bổ sung sẽ tạo ra một mớ hỗn độn hoàn toàn trong lưới.

Đặt kích thước rãnh cho lưới ngầm

Bạn có thể nhận thấy rằng hàng phụ không cao bằng hai hàng trước. Điều này là do chúng tôi đặt chiều cao hàng trong thuộc tính Grid-template-rows nhưng nó chỉ áp dụng cho các lưới rõ ràng. Chiều cao hàng trên lưới ngầm phải được đặt bằng thuộc tính Grid-auto-rows. Nhưng vì chúng tôi không làm điều này nên hóa ra hàng ẩn sử dụng kích thước bản nhạc tự động, kích thước này dựa trên nội dung. Đây là cách đặt các thuộc tính để đặt kích thước bản nhạc:

Nói chung nó diễn ra như thế này:

Lưới rõ ràng sử dụng các hàng mẫu lưới và cột mẫu lưới

Lưới ngầm sử dụng các hàng tự động lưới và cột tự động lưới

Trong trường hợp này chúng ta không cần phải chỉ định giá trị cuối cùng trên phần tử đầu tiên vì nó chỉ bao gồm một bản nhạc. Điều tương tự cũng có thể nói về phần tử lưới thứ hai. Theo mặc định, nếu bạn không chỉ định dòng kết thúc, phần tử sẽ chỉ kéo dài một rãnh.

Trên thực tế, chúng tôi không cần chỉ định bất kỳ vị trí nào cho phần tử lưới đầu tiên, vì nó ở một vị trí nhất định nên dù sao thì nó cũng đã ở đó. Nhưng nếu chúng ta không chỉ định vị trí cho phần tử thứ hai thì nó sẽ nằm ngay sau phần tử đầu tiên, chỉ chiếm 1 track.

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

Bạn cũng có thể đặt tên cho các đường lưới để dễ tham khảo hơn. Điều này có thể được thực hiện bằng cách đặt các thuộc tính Grid-template-rows và Grid-template-columns, ví dụ như ở đây:

#grid ( display: Grid; /* Đặt các bản nhạc và đặt tên cho các dòng */ Grid-template-rows: 50px 1fr 80px ; Grid-template-columns: 120px 1fr 80px ; Grid-gap: 5px; Height: 90vh; ) . .. /* Bây giờ hãy tham khảo những dòng được đặt tên đó */ #item2 ( Grid-row-start: row3-start; Grid-column-start: col2-start; Grid-row-end: row3-end; Grid-column-end : col3 -end; )

Các dòng được đặt tên có thể rõ ràng hoặc ẩn. Các dòng được đặt tên ngầm định được tạo bất cứ khi nào bạn tạo các vùng lưới được đặt tên bằng cách sử dụng Grid-template-areas .

Tên được lấy từ vùng lưới với -start và -end được thêm vào ở cuối, tùy thuộc vào đó là đầu hay cuối dòng.

Do đó, đối với mỗi vùng lưới có tên là tiêu đề, bốn dòng ẩn sẽ được tạo. Hai cái được đặt tên là header-start và cột-start trong vùng lưới được đặt tên và hai cái được đặt tên tương ứng là header-end.

Các vùng lưới được đặt tên

Các vùng lưới có thể được đặt tên trong thuộc tính Grid-template-areas của chính vùng chứa lưới. Đây là những gì chúng tôi đã làm trước đây khi tạo mẫu trang web. Để khôi phục cái này trong bộ nhớ, nó trông như thế này:

#grid ( display: Grid; /* Đặt tên cho vùng lưới */ Grid-template-areas: “a a” “b c”; ... ) ... /* Bây giờ áp dụng từng thành phần lưới cho vùng lưới được đặt tên */ # a ( diện tích lưới: a; ) #b ( diện tích lưới: b; ) #c ( diện tích lưới: c; )

Bạn có thể chỉ ra một ô trống bằng cách sử dụng dấu chấm (.) hoặc một chuỗi dấu chấm không có dấu cách. Ví dụ:

Các vùng mẫu lưới: “a a” “. b"; Hoặc các vùng mẫu lưới: “tiêu đề tiêu đề” “... nội dung”;

Thuộc tính vị trí lưới

Có ba thuộc tính ngắn có thể được sử dụng thay cho thuộc tính bố cục lưới dài được đề cập trong các ví dụ trên. Đây là nơi tất cả họ đều phù hợp.

vùng lưới - Thuộc tính này là viết tắt của:

cột lưới - Thuộc tính này là viết tắt của:

lưới-cột-bắt đầu — cho biết dòng cột nào của phần tử lưới đang bắt đầu và nó mở rộng đến bao nhiêu rãnh.

Grid-column-end  — cho biết phần tử lưới kết thúc ở dòng cột nào và nó mở rộng đến bao nhiêu rãnh.

Grid-row — thuộc tính này là viết tắt của:

lưới-hàng-bắt đầu — cho biết phần tử lưới bắt đầu từ dòng hàng nào và nó mở rộng đến bao nhiêu rãnh.

Grid-row-end  - cho biết dòng hàng nào sẽ là dòng cuối cùng của phần tử và nó sẽ kéo dài bao nhiêu rãnh.

Bạn cũng có thể sử dụng thuộc tính Grid-auto-flow, đã được đề cập ở chương trước. Nó chỉ định cách đặt các phần tử lưới được đặt tự động trong lưới. Các phần tử được đặt tự động là những phần tử không được đặt rõ ràng bằng cách sử dụng bất kỳ thuộc tính nào ở trên.

Tạo một lưới lồng nhau

Bản thân các phần tử lưới có thể trở thành lưới trong CSS Grid. Nghĩa là, bạn có thể lồng một phần tử lưới vào trong một phần tử lưới khác, từ đó tạo ra một lưới lồng nhau.

Để tạo một lưới lồng nhau như vậy, tất cả những gì bạn phải làm là áp dụng display:grid (hoặc display: inline-grid) cho phần tử lưới và nó sẽ trở thành một lưới. Bạn cũng có thể sử dụng display: subgrid để tạo lưới con. , Làm thế nào điều này xảy ra.

Di sản

Hầu hết các thuộc tính lưới không được kế thừa, điều đó có nghĩa là lưới lồng nhau của bạn sẽ không kế thừa các giá trị của lưới cha của nó. Điều này cho phép bạn thực hiện các thay đổi đối với lưới cha mà không vô tình ảnh hưởng đến lưới con.

Ví dụ: bạn đặt Grid-auto-flow: cột trên lưới cha nhưng bạn không đặt thuộc tính trên lưới lồng nhau. Trong trường hợp này, lưới lồng nhau sẽ được đặt thành hàng vì đó là giá trị ban đầu cho thuộc tính này.

Lưu ý rằng trên lưới cha, các số đi theo chiều dọc xuống các cột thay vì theo chiều ngang dọc theo hàng, nhưng lưới lồng nhau vẫn đi theo chiều ngang dọc theo hàng.

Lưới con

Mô-đun CSS Grid đặt giá trị lưới con cho thuộc tính hiển thị. Tuy nhiên, không phải tất cả các trình duyệt đều hỗ trợ nó. Giá trị này sẽ tỏ ra khá hữu ích.

Lưới con là một lưới lồng nhau nhưng có display: subgrid . Điều này làm cho nó trở thành một loại bộ chứa lưới đặc biệt tham gia vào việc thiết lập kích thước lưới của bộ chứa lưới chính. Nói cách khác, nội dung của lưới con ảnh hưởng đến kích thước của lưới cha, cho phép nội dung được trải rộng trên hai lưới. Dưới đây là một ví dụ về nơi thuộc tính này có thể hữu ích.

Dưới đây là danh sách các yếu tố:

• Tên:
• Địa chỉ:
• Điện thoại:

Và đây là CSS, trong đó danh sách là một lưới và các thành phần danh sách là các lưới con.

Ul ( display: lưới; lưới: auto-flow / auto 1fr; ) li ( display: subgrid; lưới-cột: span 2; lề: 0,5em; đường viền: rắn; đệm: 0,5em; ) nhãn ( lưới-cột: 1; ) đầu vào (cột lưới: 2; )

Ví dụ này sẽ hiển thị nhãn và thông tin nhập trong một hàng, có đường viền xung quanh mỗi mục danh sách. Cung cấp cho mỗi thành phần danh sách một lưới con có nghĩa là sẽ không có bất kỳ vấn đề nào với việc căn chỉnh các biểu mẫu đầu vào, bởi vì mỗi thành phần danh sách sẽ tham gia vào việc định hình kích thước của lưới cha.

Biểu mẫu vị trí tự động

Bạn có thể sử dụng lưới rõ ràng làm lợi thế khi tạo biểu mẫu hoặc bất kỳ tập hợp phần tử nào khác yêu cầu căn chỉnh lưới. Ví dụ: bạn có thể sử dụng lưới rõ ràng để tạo biểu mẫu như thế này:

Và khi bạn thêm các thành phần biểu mẫu vào đánh dấu của mình, lưới rõ ràng sẽ thêm các hàng để chứa chúng. Vì vậy, để tạo hình dạng trên cùng, chúng ta cần đánh dấu này.

Không cần đánh dấu bổ sung để sắp xếp mọi thứ một cách chính xác. Và cũng không cần thêm các lớp bổ sung cho các thành phần của biểu mẫu. Chúng tôi chỉ thêm một lớp cho

Bạn có thể tự động thêm các thành phần biểu mẫu mới và chúng sẽ tự động điều chỉnh cho phù hợp với các thành phần khác vì chúng sẽ được đặt trong một lưới rõ ràng.

Điều này có thể thực hiện được vì chúng tôi đã tự biến biểu mẫu thành một lưới (hiển thị: lưới được áp dụng cho .myForm). Và sau đó họ chỉ ra rằng các nhãn nằm trong một cột và các điều khiển nằm trong một cột khác.

Đây là một ví dụ khác, lần này có nhiều phần tử hơn:

Khi các lưới con trở nên phổ biến trong các trình duyệt, sẽ có thể căn chỉnh các phần tử biểu mẫu không phải là hậu duệ trực tiếp của