Giới thiệu về Bố cục lưới CSS. Lưới linh hoạt trong bố cục đáp ứng là gì? Định vị các phần tử trong lưới

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.

Lưới CSS 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 — điều 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 mạng, 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ử bất kể bố cục như thế nào. 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ó. Các float đượ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 đi 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. Sự sáng tạo mẫu khác nhau Vì 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:

Ví dụ

tiêu đề

Bài báo

Quảng cáo

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:

tiêu đề

Bài báo

Quảng cáo

Và vì vậy chúng tôi sẽ làm thù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: “tiêu đề tiêu đề tiêu đề” “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” */ “chân trang chân trang chân trang”; 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:

Ví dụ

Đâ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.

Ví dụ

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.

Ví dụ

tiêu đề

Bài báo

Quảng cáo

Đâ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ờ mong đợ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 lưới ngầm 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ụ:

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 ngầm đã đượ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 điện.

Đặ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

Ví dụ

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 cuối, thì phần tử sẽ chỉ trải dài trên 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.

Grid-area - 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.

Ví dụ

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.

Ví dụ

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; phầ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 hơn một lượng lớn các yếu tố:

Ví dụ

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

. Ví dụ: chẳng hạn như danh sách các thành phần biểu mẫu.

Căn chỉnh lưới CSS

Nói chung, hầu hết các thuộc tính căn chỉnh đều hoạt động giống nhau trên các phần tử lưới cũng như trên các phần tử khác. Nhưng cũng có một số thuộc tính căn chỉnh chỉ áp dụng cho lưới và phần uốn cong.

Thuộc tính Align-items chỉ định giá trị căn chỉnh tiêu chuẩn cho tất cả các thành phần lưới tham gia vào vùng chứa lưới trong bối cảnh định dạng của nó.

căn chỉnh các mục: giữa;

Trong ví dụ trên, chúng tôi đang sử dụng căn chỉnh-items: center cho vùng chứa lưới, do đó tất cả các thành phần lưới sẽ được căn chỉnh về tâm của trục khối.

Nhưng vì đây là mặc định nên bất kỳ thành phần lưới nào cũng có thể ghi đè lên nó bằng thuộc tính Align-self.

Thuộc tính tự căn chỉnh

Thuộc tính này căn chỉnh một phần tử trong khối vùng chứa dọc theo trục khối/cột/chéo.

Đỏ ( nền: màu cam; chiều cao: 40%; căn chỉnh: đường cơ sở; ) .green ( nền: màu vàng xanh; chiều cao: 60%; ) .blue ( nền: thépblue; chiều cao: tự động; căn chỉnh: căng; )

thuộc tính địa điểm

Thuộc tính này là một cách viết tắt của just-items vàalign-items .

Tôi nghĩ bạn đã biết rằng Grid vượt trội hơn Flexbox trong việc tạo bố cục. Nhưng còn bố cục đáp ứng thì sao? Nên sử dụng Flexbox hay Grid cái nào tốt hơn? Cả hai đều có thể hoạt động với bố cục đáp ứng. Rốt cuộc, bạn có thể nghĩ Flexbox phù hợp hơn - Các vật phẩm Flex có thể kéo dài, co lại, thay đổi hướng, v.v. Nhưng Grid thực sự có một số thủ thuật mới sẽ giúp bạn tiết kiệm rất nhiều thời gian và rắc rối cho các bố cục đáp ứng.

Hàm tối thiểu

Công cụ Grid mới sáng bóng đầu tiên là hàm minmax, cho phép chúng ta xác định phạm vi cho các cột và hàng trong bố cục của mình. Trong ví dụ này, chúng tôi có một thanh bên màu cam và chúng tôi muốn chiều rộng tối thiểu là 100 pixel nhưng không quá 30% chiều rộng của vùng chứa. Chiều rộng của vùng chứa là 500 pixel, vì vậy thanh bên của chúng tôi vui vẻ chiếm 30% (150 pixel).

Đây là cùng một mã, nhưng chiều rộng vùng chứa nhỏ hơn 150px. Bây giờ giá trị tối thiểu của chúng tôi bắt đầu hoạt động và đảm bảo rằng thanh bên màu cam không nhỏ hơn 100px.

Cách hoạt động của hàm minmax thật tuyệt vời, trong hầu hết các trường hợp, bạn thậm chí không cần sử dụng truy vấn phương tiện.

Chúng ta có thể đạt được hiệu ứng tương tự bằng cách sử dụng Flexbox, nhưng nó đòi hỏi nhiều công sức và mã hơn một chút. Chúng ta phải sử dụng kết hợp flex-grow, min-width, max-width:

Phương pháp Grid linh hoạt hơn và dễ thích ứng hơn. Mã ít hơn gần hai lần.

Một quy tắc cho tất cả các yếu tố

Nếu bạn thực sự cần truy vấn phương tiện, thì với bố cục Lưới, điều đó thật dễ dàng thực hiện. Giả sử chúng ta muốn thay đổi bố cục này trên thiết bị di động thành một cột. Với Flexbox, chúng ta sẽ cần thay đổi mọi thành phần trong bố cục để ghi đè chiều rộng tối thiểu. Không cần ghi đè chiều rộng tối đa vì chiều rộng tối thiểu được ưu tiên.

Nếu bạn có bố cục đơn giản, phương pháp này hoạt động khá tốt. Nhưng bố cục của bạn càng phức tạp thì bạn càng cần xác định lại nhiều yếu tố hơn thông qua truy vấn phương tiện. Với sự trợ giúp của Grid, vấn đề này sẽ được giải quyết dễ dàng hơn nhiều.

Từ tác giả: bài viết từ loạt bài về khái niệm bố cục Lưới CSS. Trong các bài học trước, chúng ta đã học cú pháp lưới, học một số cách sắp xếp các thành phần trên một trang và tạm biệt một số thói quen cũ. Trong hướng dẫn này, chúng tôi sẽ áp dụng tất cả kiến thức của mình vào thực tế để tạo ra một bố cục đáp ứng.

Truy vấn phương tiện truyền thông

Hãy lấy bản demo từ bài học trước.

Trang bao gồm hai lưới: lưới chính và một lưới được lồng bên trong một trong các phần tử. Chúng tôi có thể kiểm soát các mắt lưới của mình bằng cách sử dụng truy vấn phương tiện. Điều này có nghĩa là chúng ta hoàn toàn có thể xây dựng lại bố cục để phù hợp với chiều rộng màn hình khác.

Chúng ta sẽ bắt đầu bằng việc sao chép phần khai báo của lưới đầu tiên. Hãy gói bản sao trong truy vấn phương tiện bằng kỹ thuật ưu tiên thiết bị di động. Tôi tùy ý lấy 500px làm điểm chuyển tiếp.

Grid-1 ( /* kiểu lưới */ ) chỉ có màn hình @media và (độ rộng tối thiểu: 500px) ( .grid-1 ( /* kiểu lưới */ ) )

Bây giờ chúng ta sẽ thay đổi lưới trong quảng cáo đầu tiên để đặt mọi thứ vào một cột. Chúng tôi đặt một cột bằng thuộc tính Grid-template-columns. Kiểm tra xem bốn hàng của chúng tôi có được đặt bằng thuộc tính Grid-template-rows không và khớp với bố cục bằng thuộc tính Grid-template-areas:

Lưới-1 ( hiển thị: lưới; chiều rộng: 100%; lề: 0 tự động; lưới-mẫu-cột: 1fr; lưới-mẫu-hàng: 80px tự động tự động 80px; khoảng cách lưới: 10px; khu vực mẫu lưới: " tiêu đề" "chính" "thanh bên" "chân trang"; )

Lưới - 1 (

hiển thị:lưới;

chiều rộng: 100%;

lề: 0 tự động;

lưới - mẫu - cột : 1fr ;

lưới - mẫu - hàng: 80px tự động tự động 80px;

khoảng cách lưới: 10px;

lưới - mẫu - khu vực: "tiêu đề"

"chủ yếu"

"thanh bên"

"chân trang" ;

Để vừa với màn hình nhỏ, chúng tôi đặt khoảng cách lưới thành 10px theo mặc định. Đây là những gì chúng tôi có. Bạn cũng nên lưu ý rằng chúng tôi thay đổi thuộc tính khoảng đệm và kích thước phông chữ của các phần tử div .grid-1 bằng truy vấn phương tiện.

Lưới lồng nhau của chúng tôi

Đoạn mã trên sửa đổi bố cục chính của chúng tôi. Tuy nhiên, chúng ta vẫn có một lưới lồng nhau kiên quyết từ chối loại bỏ hai cột của nó trên bất kỳ màn hình nào. Để khắc phục điều này, chúng tôi sẽ thực hiện chính xác điều tương tự, nhưng lấy một điểm chuyển tiếp khác bằng phương pháp ưu tiên nội dung:

Mục-2 ( /* kiểu lưới */ ) màn hình chỉ @media và (độ rộng tối thiểu: 600px) ( .item-2 ( /* kiểu lưới */ ) )

Nếu chúng ta làm lại bản demo tự động điền và thay đổi độ rộng cột thành minmax(9em, 1fr), thì lưới sẽ cố gắng vừa với nhiều rãnh có chiều rộng 9em nhất có thể, sau đó mở rộng chúng thành 1fr cho đến khi toàn bộ vùng chứa đầy:

Nhược điểm: Lưới sẽ chỉ tính toán lại các bản nhạc sau khi khởi động lại chứ không phải khi chiều rộng cửa sổ thay đổi. Hãy thử thu hẹp cửa sổ trình duyệt của bạn và làm mới trang. Để thay đổi giá trị, bạn có thể kết nối truy vấn phương tiện nhưng chúng không hoạt động tốt khi thay đổi độ rộng của cửa sổ trình duyệt.

Phần kết luận

Hãy tóm tắt tất cả những điều trên trong một danh sách:

Truy vấn phương tiện cho phép chúng tôi xây dựng lại hoàn toàn lưới bằng cách thay đổi thuộc tính Grid-template-areas (và các thuộc tính khác) cho các trường hợp khác nhau.

Thuộc tính chuyển tiếp không ảnh hưởng đến bố cục lưới.

Từ khóa tự động điền hoạt động tốt để điền vào vùng chứa lưới.

Hàm minmax() là một bổ sung tuyệt vời cho tính năng tự động hoàn thành nhưng nó không mang lại cho chúng ta khả năng thích ứng thực sự.

Bây giờ bạn đã sẵn sàng làm việc với mắt lưới! Hãy theo dõi để biết thêm các bài viết về Lưới CSS, bài tập thực hành và giải pháp cho các vấn đề về lưới thường gặp.

Tôi nhận thấy kỹ thuật Grids khoảng một năm trước. Sau đó, kỹ thuật này, sau một nghiên cứu rất hời hợt, dường như vô dụng và mang tính thử nghiệm đối với tôi; tôi cảm thấy khó chịu vì thực tế là để triển khai, cần phải tạo thêm đánh dấu. Nhưng giờ đây, việc không chú ý đến số lượng trang web được xây dựng trên lưới cũng như số lượng bài viết và hướng dẫn về nó đang trở nên khó khăn. Nhờ có phần sau, việc nghiên cứu và hiểu các nguyên tắc và khái niệm cũng như rút ra ít nhiều kết luận thực tế đã trở nên dễ dàng hơn nhiều. Kết luận của tôi một năm sau đó là: “Mọi nhà thiết kế web có lòng tự trọng nên biết giải pháp đơn giản và hữu ích này từng được tạo ra để bố cục các trang web”.

Bất cứ ai đã từng làm việc với các biên tập viên đồ họa đều biết lưới là gì. (Photoshop, Pháo hoa, Gimp, v.v.) và tất nhiên đánh giá cao sự cần thiết của nó khi tạo ra bất kỳ thiết kế nào. Nhưng làm cách nào để triển khai Lưới trên web? Trong thực tế dạng bảng bố cục là một thiết kế trang web thực sự với Lưới, chắc chắn là rất tiện lợi. Nhưng không phải mục đích sử dụng của các yếu tố bàn thật kinh khủng.
May mắn thay, sự phổ biến rộng rãi của các tiêu chuẩn web đã phát triển và tiếp tục phát triển trong những năm gần đây, cũng như sự hỗ trợ của chúng trong các trình duyệt hiện đại, đã cho chúng ta cơ hội tạo ra các trang có chức năng phong phú với rất ít đánh dấu logic. Cách bố trí này được gọi Khối. Nhưng cũng Khối bố cục hóa ra là một điểm yếu. Khi tạo các trang với một tập hợp khổng lồ các phần tử có kích thước và ý nghĩa khác nhau, việc đánh dấu các trang như vậy đã trở thành một nhiệm vụ rất khó khăn và nếu có nhiều người làm việc đánh dấu, công việc đó có thể trở thành một cơn ác mộng.
Và rồi kỹ thuật sử dụng Lưới đã ra tay giải cứu. Kỹ thuật này là sự kết hợp giữa Khối Và dạng bảng cách trình bày. Sử dụng nó mang lại cho chúng tôi:

tốc độ và dễ dàng phát triển
tự do định vị
tỷ lệ của các thành phần trang và vị trí của chúng

Giá cho tất cả điều này chỉ là một chút đánh dấu thêm. Tôi nghĩ ngày nay, khi giá đồng hồ của một người đắt hơn nhiều so với phần cứng và năng suất, không khó để đoán được cán cân đang nghiêng về phía nào.

Bố cục với Grid là gì? Trước hết, đó là một khái niệm. Một khái niệm bao gồm nhiều khía cạnh thiết kế và rất ít quy tắc để thực hiện nó. Điều này mang lại sự tự do hoàn toàn và không có tiêu chuẩn hóa trong việc thực hiện nó. Tôi sẽ nói nhiều hơn nữa - cùng một Grid có thể được triển khai theo nhiều cách khác nhau. Nếu bạn đã đọc về Grid, bạn có thể nhận thấy rằng mỗi tác giả đều bắt đầu từ một góc độ mới, đi sâu vào các chi tiết, nói một cách nhẹ nhàng thì khó hiểu. May mắn thay họ bắt đầu xuất hiện Hệ thống lưới- Thư viện CSS để làm việc với Grid. Và sử dụng ví dụ của họ, bạn có thể nhanh chóng nắm vững các nguyên tắc cơ bản của kỹ thuật này.

Tôi nghĩ thật vô nghĩa khi viết về tất cả các khía cạnh của Lưới; bạn có thể dễ dàng tìm thấy thông tin về nó trên Internet. Tôi khuyên bạn nên tạo đơn giản của riêng bạn Hệ thống lưới điện.

Trước tiên, bạn cần hiểu rằng lưới bao gồm các cột và khoảng cách giữa chúng. Có ba giá trị chính - chiều rộng lưới, chiều rộng cột và chiều rộng khoảng cách giữa các cột. Chiều rộng của các cột phụ thuộc vào số lượng của chúng.

Hãy thử tạo một lưới rộng 950 pixel với 16 cột có khoảng cách 10 pixel, do đó, một cột phải rộng 50 pixel. Sau khi hiểu tất cả các giá trị, chúng tôi mở bất kỳ trình soạn thảo đồ họa nào mà chúng tôi biết và tạo bố cục. Bạn cũng có thể thêm phần đệm vào Lưới ở bên trái và bên phải, giả sử mỗi phần là 20 pixel và điều này sẽ dẫn đến bố cục có chiều rộng là 990 pixel. Bạn có thể xem ví dụ của tôi.

Bây giờ chúng ta có thể bắt đầu tạo thư viện của mình. Giống như hầu hết các thư viện CSS của chúng tôi cần thiết lập lại toàn cục, tôi đề xuất Thiết lập lại CSS của Eric Mayer, giữ nguyên đặt lại.css hãy tạo ra lưới.css mà chúng ta có thể thêm ngay một phương pháp làm sạch các thùng chứa khối nổi - Clear Fix. Điều đầu tiên chúng ta cần là một quy tắc cho vùng chứa sẽ chứa tất cả các cột của chúng ta. Chiều rộng của mỗi vùng chứa bằng chiều rộng của lưới của chúng tôi.

.thùng đựng hàng(
lề: 0 tự động;
chiều rộng: 950px;
}

Bây giờ chúng ta có thể thêm quy tắc cho các cột của mình, nó chứa chiều rộng và phần đệm. Thụt lề hoạt động như một khoảng trống (mương nước) giữa các cột.

.cột(
nổi: trái;
lề phải: 10px;
tràn: ẩn;
chiều rộng: 50px;
}

Cột cuối cùng không cần thụt lề; để thực hiện việc này, hãy thêm quy tắc cho cột đó:

Container của chúng ta chứa các cột, các cột là các khối nổi nên phải được làm sạch. Để tránh .clearfix không cần thiết trong đánh dấu, bạn có thể áp dụng quy tắc này cho vùng chứa:

.clearfix:sau .container:sau{
nội dung: ".";
hiển thị: khối;
chiều cao: 0;
rõ ràng: cả hai;
khả năng hiển thị: ẩn;
}
sửa chữa rõ ràng, .thùng đựng hàng( hiển thị: khối nội tuyến; )
/* Ẩn khỏi IE-mac \*/
*html.clearfix, *html.container(chiều cao: 1%;)
.clearfix, .thùng đựng hàng(hiển thị: khối;)
/* Kết thúc việc ẩn khỏi IE-mac */

Bây giờ chúng ta có thể bắt đầu với các cột của mình. Cột có thể rộng hai hoặc ba, v.v. Để làm điều này, chúng ta có thể áp dụng các quy tắc sau cho chúng:

.span-1 ( chiều rộng: 50px; )
.span-2 (chiều rộng: 110px; )
.span-3 (chiều rộng: 170px; )
.span-4 (chiều rộng: 230px; )
.span-5 (chiều rộng: 290px; )
.span-6 (chiều rộng: 350px; )
.span-7 (chiều rộng: 410px; )
.span-8 (chiều rộng: 470px; )
.span-9 (chiều rộng: 530px; )
.span-10 (chiều rộng: 590px; )
.span-11 (chiều rộng: 650px; )
.span-12 (chiều rộng: 710px; )
.span-13 (chiều rộng: 770px; )
.span-14 (chiều rộng: 830px; )
.span-15 (chiều rộng: 890px; )
.span-16 ( chiều rộng: 950px; lề phải: 0; )

Về nguyên tắc, đây là tất cả những gì cần thiết cho việc triển khai Lưới; bạn cũng có thể thêm trình bao bọc và lớp để xem Lưới bằng bố cục. Hãy tạo ra chính.css và thêm vào nó:

.vỏ bánh(
lề: 0 tự động;
chiều rộng: 990px;
}
.overlay(
nền: url trong suốt (overlay.png) lặp lại-y cuộn trên cùng bên trái;
}

Đây là cách bố trí có thể trông như thế nào:

Tôi nghĩ điều này là đủ cho một sự khởi đầu.
Bạn có thể xem ví dụ của tôi

Ngày xửa ngày xưa, tôi đã viết về một dịch vụ đặc biệt, đó là AI để tạo một trang web. Đánh giá theo kết quả hiện tại, họ hóa ra là “tầm thường”, đặc biệt là khi xét đến mức giá đã nêu. về mặt này chúng sẽ hiệu quả hơn.

Hôm nay tôi muốn nói về một “công nghệ” có tên tương tự nhưng bản chất hoàn toàn khác - CSS Grid! Bài viết bao gồm một số phần:

Cách tiếp cận này để xây dựng bố cục giúp dễ dàng tạo các lưới trang web khá linh hoạt bằng CSS. Trong tương lai nó có thể sẽ được sử dụng ở mọi nơi. Nếu tôi hiểu chính xác thì nó hoàn hảo cho các tác vụ tương tự như Flexbox, nhưng không giống như nó, nó có thể hoạt động đồng thời ở các chiều hai chiều (cột và hàng). Dưới đây tôi cung cấp bản dịch của bài viết, đây là một dạng giới thiệu về chủ đề và chứa các ví dụ giáo dục đơn giản. Chú ý! Tác giả của ghi chú đang thực hiện một khóa học (!) miễn phí về CSS Grid vào tháng 12, nếu bạn muốn, hãy gửi yêu cầu đến Email của anh ấy.

Tôi cũng tìm thấy một video hữu ích về chủ đề này trên Internet. Có lẽ ai đó sẽ dễ dàng tiếp nhận thông tin như thế này hơn:

Giới thiệu về lưới CSS

Năm nay, công nghệ này đã nhận được sự hỗ trợ tích hợp trong Chrome, FF, Safari nên rất có thể nó sẽ trở thành công cụ phổ biến trong thời gian tới. Nhưng hiện tại, bạn cần nhớ quan tâm đến những trình duyệt web lỗi thời và lag.

Lưới đơn giản nhất

Có 2 đối tượng chính ở đây:

cha/trình bao bọc (gói tất cả các khối bên trong tạo nên nó);
trẻ em/vật phẩm (chính các phần tử).

Đây là thiết kế đơn giản nhất:

Trình bao bọc (hiển thị: lưới;)

Tuy nhiên, ngay sau đó, sẽ không có gì thay đổi nhiều vì định dạng hiển thị không được xác định. Bạn sẽ thấy 6 DIV nối tiếp nhau.

Cột và hàng

Để tạo lưới hai chiều, bạn cần chỉ định tham số của hàng và cột - sử dụng các tùy chọn lưới-mẫu-hàng Và lưới-mẫu-cột tương ứng:

.wrapper ( display : lưới; lưới-template-cột : 100px 100px 100px ; lưới-template-rows : 50px 50px ; )

Trình bao bọc ( display: lưới; lưới-template-cột: 100px 100px 100px; lưới-template-rows: 50px 50px; )

Vì có ba giá trị cho các cột nên số lượng chúng sẽ được tạo như nhau, do đó, chỉ có 2 hàng tính bằng pixel được đặt trong trường hợp đầu tiên là chiều rộng của các phần tử (mỗi phần tử 100px), trong trường hợp thứ hai. - chiều cao (50px).

Đây là một ví dụ khác để giúp bạn hiểu rõ hơn về cách thức hoạt động của nó:

.wrapper ( display : lưới; lưới-template-cột : 200px 50px 100px ; lưới-template-rows : 100px 30px ; )

Trình bao bọc ( display: lưới; lưới-template-cột: 200px 50px 100px; lưới-template-rows: 100px 30px; )

Hình ảnh sau đây sẽ được hiển thị:

Vị trí và kích thước

Với tính năng này, bạn sẽ có được khả năng thực sự rất mạnh mẽ để tạo lưới trang web. Giả sử chúng ta có kích thước 3x3:

.wrapper ( display : lưới; lưới-template-cột : 100px 100px 100px ; lưới-template-rows : 100px 100px 100px ; )

Trình bao bọc ( display: lưới; lưới-template-cột: 100px 100px 100px; lưới-template-rows: 100px 100px 100px; )

Nếu mã HTML, như trong ví dụ của chúng tôi, có 6 phần tử DIV (xem ở phần đầu), thì trong trường hợp này chỉ có 2 hàng được hiển thị trên trang web, hàng thứ ba sẽ tạm thời không được điền. Tuy nhiên, khi chúng ta bắt đầu áp dụng các tham số khác nhau cho vị trí và kích thước của các khối – cột lưới hàng lưới, tình hình sẽ thay đổi.

Chúng tôi gán kiểu cho một trong các đối tượng:

.item1 ( lưới-cột-bắt đầu : 1 ; cuối cột lưới : 4 ; )

Mục1 ( bắt đầu cột lưới: 1; cuối cột lưới: 4; )

Điều này có nghĩa là DIV với lớp item1 bắt đầu từ dòng đầu tiên của cột trong lưới và kết thúc ở dòng thứ 4, nghĩa là nó lấp đầy toàn bộ hàng.

Trên thực tế, bây giờ một số đối tượng đã chuyển đến dòng cuối cùng mà chúng tôi đã viết trước (3x3). Có một lựa chọn đơn giản hơn:

.item1 ( cột lưới : 1 / 4 ; )

Item1 (cột lưới: 1 / 4; )

.item1 ( bắt đầu cột lưới : 1 ; cuối cột lưới : 3 ; ) .item3 ( bắt đầu hàng lưới : 2 ; cuối hàng lưới : 4 ; ) .item4 ( bắt đầu cột lưới : 2 ; cuối cột lưới : 4 ;

Item1 ( lưới-cột-bắt đầu: 1; lưới-cột-cuối: 3; ) .item3 ( lưới-hàng-bắt đầu: 2; lưới-hàng-cuối: 4; ) .item4 ( lưới-cột-bắt đầu: 2; cuối cột lưới: 4 )

Nó cho chúng ta hình ảnh sau:

Bạn đã tìm ra được nó chưa? Về nguyên tắc, nó không khó, nhưng bạn cần hiểu rằng đây chỉ là phần cơ bản về các sắc thái của CSS Grid.

Khu vực tạo mẫu và bố cục bằng lưới CSS

Mã đánh dấu như sau (HTML):

Vùng chứa ( display: lưới; lưới-template-cột: lặp lại (12, 1fr); lưới-mẫu-hàng: 50px 350px 50px; khoảng cách lưới: 5px; )

Nếu về nguyên tắc mọi thứ đã rõ ràng về các hàng thì cần phải làm rõ các cột. Ở đây với ý nghĩa lưới-mẫu-cột một lưới được tạo bao gồm 12 cột giống hệt nhau (chiều rộng của mỗi cột = 1/12 tổng số) + lề 5px giữa chúng (khoảng cách lưới).

Thêm khu vực mẫu lưới

Tùy chọn này mang đến cho bạn sự linh hoạt hơn nữa và các tính năng tuyệt vời. Có lẽ cú pháp và định dạng của tham số khu vực mẫu lưới trông hơi bất thường, nhưng xa hơn bạn sẽ hiểu tại sao mọi thứ lại giống hệt như thế này:

.container ( display : Grid; Grid-gap: 5px ; Grid-template-columns : lặp lại (12 , 1fr) ; Grid-template-rows : 50px 350px 50px ; Grid-template-areas : "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f " ; )

Vùng chứa ( hiển thị: lưới; khoảng cách lưới: 5px; cột mẫu lưới: lặp lại (12, 1fr); hàng mẫu lưới: 50px 350px 50px; vùng mẫu lưới: "h h h h h h h h h h h h" "m m c c c c c c c c c c c" "f f f f f f f f f f f f" ; )

Đây là một dạng trình bày trực quan về lưới trang web của bạn bằng CSS. Tất cả các ký tự trong tham số này có dạng 3 hàng và 12 cột, được xác định bởi dòng trên. Mỗi chữ cái tương ứng với một ô. Các tên trong ví dụ tương ứng với các khối mã HTML: tiêu đề (h), menu (m), nội dung (c) và chân trang (f), nhưng bạn có thể sử dụng bất kỳ tùy chọn nào khác.

Chỉ định khu vực mẫu và thử nghiệm

Trong bước tiếp theo, bạn "liên kết một cách hợp lý" các ký hiệu vùng chứa và phần tử DIV:

.header ( Grid-area : h; ) .menu ( Grid-area : m; ) .content ( Grid-area : c; ) .footer ( Grid-area : f; )

Tiêu đề ( Grid-area: h; ) .menu ( Grid-area: m; ) .content ( Grid-area: c; ) .footer ( Grid-area: f; )

Trang web sẽ hiển thị bố cục như thế này:

Và bây giờ phép thuật bắt đầu. Hãy hoán đổi một số chữ cái trong tham số khu vực mẫu lưới, ví dụ: “c” và “m” ở những vị trí:

lưới-mẫu-khu vực: "h h h h h h h h h h h h h h" "c c c c c c c c c c c m m" "f f f f f f f f f f f f" ;

lưới-mẫu-khu vực: "h h h h h h h h h h h h h" "c c c c c c c c c c c m m" "f f f f f f f f f f f f";

Lưới sẽ trông khác:

Việc thêm khả năng thích ứng vào thiết kế này nhìn chung trông thật tuyệt vời. Bạn không thể làm điều này chỉ với HTML, nhưng trong CSS mọi thứ đều có thể: ". h h h h h h h h h h ." "c c c c c c c c c m m" ". ff ff ff ff ff ." ;

lưới-mẫu-khu vực: ". h h h h h h h h h h ." "c c c c c c c c c m m" ". ff ff ff ff ff .";

Trang web trông như thế này:

Không có tập lệnh hoặc HTML - chỉ có sự kỳ diệu của CSS Grid!

Ví dụ về lưới và Flex bổ sung

Sau này về Thủ thuật CSS, tôi đã tìm thấy một bài viết khác về chủ đề này, một số tùy chọn trong đó có thể hữu ích cho bạn. Theo các liên kết đến (logo trong khối mã ở trên cùng bên phải) để xem ví dụ hoạt động trên màn hình lớn.

Bố cục trang web cổ điển

Chúng ta có đầu trang và chân trang được kéo dài hết chiều rộng và giữa chúng có một khối nội dung với hai thanh bên. Trong trường hợp đầu tiên, khi thu nhỏ màn hình, mọi đồ vật sẽ vẫn giữ nguyên vị trí như trước.

Nếu bạn cần các khối được đặt ở vị trí bên dưới khối kia thì:

Lưới blog 2 cột

Giả sử chúng ta có một khối nội dung lớn và một thanh bên ở giữa. Mã bên dưới giữ nguyên tất cả các đối tượng khi kích thước trang giảm.

Kỹ thuật thứ hai là sắp xếp chúng lần lượt.

Phân bố chiều rộng của các phần tử

Nhìn bề ngoài, ví dụ này giống như một thư viện, khi tất cả các hình ảnh nằm cạnh nhau trong một số cột. Khi bạn giảm kích thước, ngày càng ít chúng xuất hiện trên mỗi dòng.

Hình ảnh bên trong bài viết

Ở đây nội dung được chia thành 2 phần và giữa chúng có một khối toàn màn hình.

Tổng cộng. Nói chung, tôi đã khám phá ra khái niệm CSS Grid, thành thật mà nói, nó đã gây ấn tượng với tôi - đặc biệt là các khung trong đó các khu vực bố cục với các chữ cái khác nhau được xem xét. Tất nhiên, đây đều chỉ là những điều cơ bản về “công nghệ”, hơn nữa tôi cũng không mô tả chi tiết từng tham số của mã. Các ví dụ ở phần cuối của bài viết phức tạp hơn và cần được xem xét cẩn thận. Nó kết hợp cả Flex và Grid. Nếu chủ đề này thú vị, hãy đăng ký các khóa học của tác giả đầu tiên - Các mục gửi email trong ghi chú thứ nhất hoặc thứ hai ban đầu.

Bạn có điều gì cần bổ sung về CSS Grid không? — viết suy nghĩ, lời khuyên hoặc gửi liên kết thú vị.