CSS Grid lý tưởng cho bố cục đáp ứng. Giới thiệu về Bố cục lưới CSS. Giới thiệu về lưới CSS

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 giống nhau nhưng bản chất hoàn toàn khác - Lưới CSS! 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 với sử dụ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 các 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 ra như nhau nên chỉ có 2 hàng. Các số tính bằng pixel đặt chiều rộng của các phần tử trong trường hợp đầu tiên (mỗi phần tử 100px) và chiều cao (50px) trong giây.

Đâ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 trong trường hợp này Chỉ có 2 hàng sẽ được hiển thị trên trang web, hàng thứ ba sẽ tạm thời không được lấp đầy. Tuy nhiên, khi chúng ta bắt đầu sử dụng thông số khác nhau cho vị trí và kích thướ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ế hiện nay một số đối tượng đã chuyển sang dòng cuối cùng, mà chúng tôi đã viết ra 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 ( bắt đầu cột lưới: 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.

Các 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 thậm chí còn linh hoạt hơn và 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" ; )

Đó là loại đại diện trực quan lưới trang web của bạn trong CSS. Tất cả các ký tự trong thông số này tạo thành 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

TRÊN 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 hay 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

Hãy nói rằng ở trung tâm của chúng tôi khối lớn nội dung và thanh bên. 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 chỉ là những điều cơ bản về “công nghệ”, cộng với việc tôi không mô tả chi tiết từng thông số 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 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ị.

Chào mọi người! Hôm nay chúng ta sẽ nói về hệ thống lưới là gì? hoặc đơn giản lưới linh hoạt trong bố cục thích ứng.

Đầu tiên hãy xác định nó là gì Hệ thống lưới điện.

Hệ thống lưới điện- một tập hợp các kiểu dựa trên lớp cho phép người dùng kiểm soát bố cục trang bằng hệ thống hàng và cột.

Hãy tưởng tượng chúng ta có một trang blog. Nó được chia thành 2 cột: phần chính ở bên trái và thanh bên ở bên phải. Hãy thử tạo một lưới linh hoạt cho một trang như vậy.

Chà, trước tiên chúng ta phải làm điều gì đó cơ bản, nhưng... html dấu hiệu

Ở đây chúng ta có một khối chứa toàn bộ trang, nó chứa một khối có blog, trong đó có 2 khối: phần chính của trang và thanh bên.

Vì vậy, toàn bộ trang của chúng tôi sẽ có kích thước 960px. Toàn bộ lưới được chia thành 12 cột 69px. mỗi. Phần blog sẽ rộng rãi 900px. Phần chính của trang sẽ là 566px, thanh bên - 331px.

Đây là những gì chúng tôi nhận được cuối cùng

#trang (
lề: tự động 36px;
chiều rộng: 960px;
}

Blog (
lề: 0 tự động 53px;
chiều rộng: 900px;
}

Blog.main (
nổi: trái;
chiều rộng: 566px;
}

Blog .sidebar (
phao: đúng;
chiều rộng: 331px;
}

Mọi thứ sẽ ổn, nhưng, như bạn có thể thấy, tất cả điều này là tĩnh, được chỉ định bằng pixel. Chúng tôi muốn lưới của chúng tôi thay đổi kích thước tùy thuộc vào màn hình mà trang được xem trên đó, do đó, chúng tôi cần đặt mọi thứ vào phần trăm. Làm thôi nào.

Đối với điều này, có công thức tương tự như đối với phông chữ

mục tiêu/bối cảnh = kết quả

Hãy chuyển đổi một khối của toàn bộ trang từ pixel sang tỷ lệ phần trăm.

#trang (
lề: tự động 36px;
chiều rộng: 90%;
}

90% được chọn vì trong trường hợp này chúng ta cũng sẽ có các vết lõm dọc theo các cạnh dọc theo 5% . Tuy nhiên, bạn có thể chọn một giá trị khác.

Chúng tôi sử dụng công thức của chúng tôi: 900 / 960 = 0.9357

Hãy nhân kết quả với 100 để nhận được tiền lãi và chúng tôi sẽ đăng ký nó trong css.

Blog (
lề: 0 tự động 53px;
chiều rộng: 93,75%;
}

Điều tương tự cũng cần được thực hiện với các cột, nhưng hãy lưu ý rằng ngữ cảnh đã thay đổi. Bởi vì các cột nằm bên trong một khối có một lớp .Blog, thì nó sẽ là bối cảnh. Hãy làm toán.

566 ÷ 900 = 0,628888889

331 ÷ 900 = 0,367777778

Chúng tôi chuyển đổi mọi thứ thành tỷ lệ phần trăm và viết nó vào biểu định kiểu.

Blog.main (
nổi: trái;
chiều rộng: 62,8888889%;
}

Blog .sidebar (
phao: đúng;
chiều rộng: 36,7777778%;
}

Đó là tất cả! Bây giờ chúng ta có một lưới linh hoạt và có thể sử dụng nó để bố trí.

Như bạn có thể thấy, mọi thứ đều rất đơn giản. Cơ sở của lưới linh hoạt, giống như phông chữ linh hoạt, là cùng một công thức, hãy nhớ rằng bạn có thể dễ dàng tạo các trang web phản hồi.

Ghi chú! Như bạn có thể thấy, chúng tôi đã kết thúc với các giá trị phần trăm khá dài. Một số người có thể khuyên bạn nên làm tròn chúng lại, nhưng bạn không bao giờ nên làm điều này! Nhớ!

Và đó là tất cả đối với tôi, cảm ơn bạn đã quan tâm và chúc may mắn bố cục thích ứng!

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 trên ;

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 ⇣

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à: “Thật đơn giản và giải pháp hữu ích từng được tạo ra để bố trí các trang web, mọi nhà thiết kế web có lòng tự trọng đều nên biết.”

Bất cứ ai đã từng làm việc với lưới đều biết lưới là gì. biên tập viên đồ họa (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 đã tăng lên và tiếp tục phát triển qua những năm trước, cũng như sự hỗ trợ của chúng trong các trình duyệt hiện đại, đã cho chúng tôi cơ hội tạo các trang đa chức năng với rất ít đánh dấu hợp lý. 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 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 nhiều nhất những cách khác. 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 và để 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ề; để làm điều này, hãy thêm quy tắc cho nó:

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

Khoảng năm 2012 hoặc 2013, tôi được làm quen với công việc phát triển web. Dần dần tôi bắt đầu tự mình nghiên cứu hướng đi này. Tôi sớm nhận ra rằng CSS khiến nhiều thứ trở nên có ý nghĩa, nhưng nó không tạo ra những đánh dấu phù hợp. Có rất nhiều hack đến nỗi rất khó để hiểu chúng. Đó là lý do tại sao trong các tiêu chuẩn hiện đại sẽ được thảo luận trong bài viết này, người ta đặc biệt chú ý đến việc làm việc với đánh dấu.

Bạn sẽ học được gì từ bài viết này:

• cách bạn đã từng làm việc với đánh dấu CSS;
• sự khác biệt giữa các cách tiếp cận truyền thống và tiêu chuẩn hiện đại;
• cách bắt đầu với các tiêu chuẩn mới (Flexbox và Grid);
• tại sao bạn nên quan tâm đến những tiêu chuẩn hiện đại này.

Cách chúng tôi từng làm việc với đánh dấu CSS

Nhiệm vụ

Hãy mô hình hóa một vấn đề khá chuẩn: làm thế nào để tạo một trang có hai phần - một thanh bên và một khu vực nội dung chính - có cùng chiều cao, bất kể kích thước của nội dung?

Đây là một ví dụ về những gì chúng tôi đang hướng tới:

Thanh bên và khu vực nội dung chính cùng chiều cao, bất kể kích thước nội dung

Đầu tiên, tôi sẽ chỉ cho bạn cách giải quyết vấn đề này bằng cách sử dụng các phương pháp cũ.

1. Tạo một div có hai phần tử

Ví dụ,