Giới thiệu về Bố cục lưới CSS. CSS Grid và Flexbox: so sánh trong thực tế. Thuộc tính vị trí lưới

Từ tác giả: Khi tạo các trang web phức tạp, lưới tạo ra sự khác biệt rất lớn. Tầm quan trọng của chúng trong thiết kế web hiện đại Mọi chuyện sẽ trở nên rõ ràng khi bạn nhìn vào số lượng khuôn khổ mà công nghệ này đã được triển khai để tăng tốc độ phát triển.

Khi bạn đã quen thuộc với đặc tả CSS Grid Layout, bạn sẽ không cần nữa tập tin riêng biệt styles nếu bạn muốn làm việc với hệ thống lưới. Một lợi ích quan trọng không kém là bạn sẽ không còn dựa vào các thuộc tính nội tuyến và nổi để định vị các thành phần trên trang. Trong hướng dẫn này, chúng ta sẽ tìm hiểu những điều cơ bản về hệ thống lưới và cũng tạo ra một bố cục blog đơn giản.

Hỗ trợ trình duyệt

TRÊN khoảnh khắc này chỉ IE 10+ và Edge hỗ trợ đặc tả Bố cục lưới - trên các trang thương mại công nghệ này chưa thể sử dụng được.

TRONG Chrome cái này Tùy chọn này có thể được kích hoạt thông qua cờ “Tính năng của nền tảng web thử nghiệm” trong chrome://flags. Trong Firefox – cờ bố cục.css.grid.enabled.

Một tùy chọn khác là sử dụng polyfill, và vâng, CSS Grid Polyfill tồn tại! Bạn có thể sử dụng bất kỳ tùy chọn nào trong ba tùy chọn được mô tả và nghiên cứu Bố cục lưới khi nó vẫn đang ở giai đoạn phát triển ban đầu.

Xin lưu ý: Trong IE nó hiện đang hoạt động phiên bản cũđặc điểm kỹ thuật, có nghĩa là trình duyệt không hỗ trợ đầy đủ thông số kỹ thuật mới. Khi chúng ta xem các ví dụ, tôi khuyên bạn nên sử dụng Chrome hoặc Firefox.

Thuật ngữ hệ thống lưới

Về việc định vị các phần tử, hệ thống CSS Grid là các bảng giống nhau. Tuy nhiên Công cụ này mạnh mẽ và đa dạng hơn rất nhiều. TRONG phần này Tôi sẽ nói về một số thuật ngữ mà bạn cần nhớ khi làm việc với lưới:

Đơn vị đo lường fr: Sử dụng các đơn vị này để đặt lượng không gian trống. Được sử dụng kết hợp với hàng lưới và cột lưới. Từ thông số kỹ thuật: “Việc phân bổ không gian chỉ xảy ra sau khi đã đạt đến tất cả” độ dài” hoặc kích thước của hàng và cột nội dung kích thước tối đa»

Đường kẻ: Đường đánh dấu ranh giới của các phần tử khác. Chúng có cả chiều ngang và chiều dọc. Trong hình bên dưới có 4 đường dọc và 4 đường ngang.

Bài hát: Bài hát – khoảng cách giữa những đường thẳng song song. Trong hình bên dưới có 3 rãnh dọc và 3 rãnh ngang.

Ô: Ô là khối xây dựng của lưới. Chỉ có 9 ô trong hình dưới đây.

Diện tích: Diện tích là một hình chữ nhật có số ô tùy ý. Những thứ kia. một rãnh vừa là một vùng vừa là một ô.

Định vị các phần tử trong lưới

Hãy bắt đầu với những điều cơ bản. Trong phần này, tôi sẽ chỉ cho bạn cách sử dụng lưới để đặt các phần tử ở những vị trí cụ thể. Để làm việc với CSS Grid Layout bạn cần tạo phần tử cha và một hoặc nhiều trẻ em. Ví dụ: tôi sẽ lấy phần đánh dấu bên dưới:

< div class = "grid-container" > < div class = "grid-element item-a" >MỘT< / div > < div class = "grid-element item-b" >B< / div > < div class = "grid-element item-c" >C< / div > < div class = "grid-element item-d" >D< / div > < div class = "grid-element item-e" >E< / div > < div class = "grid-element item-f" >F< / div > < / div >

Để tạo lưới, vùng chứa phải chỉ định các thuộc tính display:grid hoặc display:inline-grid, cũng như các kiểu khác:

Vùng chứa lưới ( display: Grid; Grid-template-columns: 200px 10px 0.3fr 10px 0.7fr; Grid-template-rows: auto 20px auto; )

Lưới - thùng chứa ( hiển thị:lưới; lưới - mẫu - cột : 200px 10px 0,3fr 10px 0,7fr ; lưới - mẫu - hàng: tự động 20px tự động;

Thuộc tính Grid-template-columns và Grid-template-rows thiết lập độ rộng của hàng và cột. Trong ví dụ trên tôi đã tạo 5 cột. Cột rộng 10px được sử dụng làm dấu phân cách giữa các phần tử. Cột đầu tiên có chiều rộng 200px. Cột thứ ba chiếm 0,3 không gian còn lại. Và cột thứ năm chiếm 0,7 không gian còn lại.

Vì hàng đầu tiên được đặt thành Grid-template-rows: auto, điều này cho phép hàng mở rộng khi nội dung được thêm vào. Dòng 20px hoạt động như một dấu phân cách. Trong bản demo bên dưới, bạn có thể thấy các phần tử được ép chặt vào nhau.

Hãy chú ý đến phần tử B - nó nằm ở cột thứ hai, được chúng tôi sử dụng làm dấu phân cách. Nếu vị trí của các phần tử không được đặt thủ công, trình duyệt sẽ đặt các phần tử vào các ô từ trái sang phải và nếu chúng không vừa trong một hàng thì những phần tử còn lại sẽ chuyển sang hàng thứ hai. Đó là lý do tại sao chúng tôi để lại 4 cột dự phòng ở dòng thứ hai.

Để di chuyển một phần tử đến ô đã cho lưới, bạn cần đặt vị trí của phần tử này thông qua CSS. Trước khi tôi giải thích cách di chuyển các phần tử lưới, hãy xem hình ảnh bên dưới.

Trong ví dụ này, chúng tôi sẽ sử dụng hệ thống vị trí phần tử tuyến tính. Hệ thống tuyến tính có nghĩa là các đường trong lưới sẽ đóng vai trò chủ đạo trong việc sắp xếp các phần tử. Hãy lấy phần tử B làm ví dụ. khối này bắt đầu ở dòng thứ 3 và kết thúc ở dòng thứ 4 của cột. Ngoài các đường thẳng đứng, phần tử này còn nằm giữa các đường ở hàng thứ nhất và thứ hai.

Để thiết lập sự khởi đầu đường thẳng đứng phần tử chúng ta sẽ sử dụng thuộc tính bắt đầu cột lưới. Trong trường hợp của chúng tôi, giá trị sẽ là 3. Thuộc tính Grid-column-end cho biết đường thẳng đứng kết thúc của phần tử. Trong trường hợp của chúng tôi là 4. Giá trị cho đường ngangđược hiển thị theo cách tương tự.

Dựa trên những điều trên, chúng tôi kết luận rằng để di chuyển phần tử B sang ô thứ hai, bạn phải sử dụng mã:

Phần tử-b ( lưới-cột-bắt đầu: 3; lưới-cột-cuối: 4; bắt đầu hàng lưới: 1; cuối hàng lưới: 2; )

Phần tử - b ( lưới - cột - bắt đầu : 3 ; lưới - cột - cuối : 4 ; lưới - hàng - bắt đầu : 1 ; lưới - hàng - cuối : 2 ;

Tương tự, để di chuyển phần tử F sang ô thứ sáu:

Phần tử-f ( lưới-cột-bắt đầu: 5; lưới-cột-cuối: 6; bắt đầu hàng lưới: 3; cuối hàng lưới: 4; )

Phần tử - f ( lưới - cột - bắt đầu : 5 ; lưới - cột - cuối : 6 ; lưới - hàng - bắt đầu : 3 ; lưới - hàng - cuối : 4 ;

Tạo bố cục cơ bản

Bây giờ chúng ta sẽ tạo một bố cục blog cơ bản, sẽ có đầu trang, chân trang, thanh bên và hai phần dành cho nội dung. Đầu tiên là các dấu hiệu:

< div class = "grid-container" > < div class = "grid-element header" >tiêu đề< / div > < div class = "grid-element sidebar" >Thanh bên< / div > < div class = "grid-element main" >Nội dung chính< / div > < div class = "grid-element extra" >Thông tin thêm< / div > < div class = "grid-element footer" >Chân trang< / div > < / div >

Hãy nhớ rằng thứ tự các thẻ được đặt trong đánh dấu không ảnh hưởng đến vị trí của các thành phần trên trang web. Không cần thay đổi CSS, bạn có thể đặt footer vào phần đánh dấu phía trên tiêu đề nhưng vị trí của các phần tử vẫn được giữ nguyên. Nhưng tôi không khuyên bạn nên làm điều đó. Ý tưởng chính ở đây là đánh dấu không còn cho bạn biết phần tử sẽ nằm ở đâu nữa.

Tất cả những gì chúng ta phải làm là xác định giá trị của các thuộc tính như Grid-row-end cho tất cả các phần tử. Như trong ví dụ trước, chúng ta sẽ sử dụng sơ đồ lưới để xác định giá trị thuộc tính.

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 Vì 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 giúp bạn dễ dàng quản lý đánh dấu thông qua CSS, nhưng hiện tại nó thậm chí còn chưa hết phiên bản 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 từ LinkedIn và Jen Simmons từ Mozilla, tin chắc rằng phương pháp tạo trang này là tương lai: đại diện trực quan nên được tách khỏi logic JavaScript và thích ứng độc lập với nó.

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 to lớn 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 thành thạo nguyên tắc cơ bản 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ề; vì điều này, chúng tôi cũng sẽ 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

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 xác đị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 lãi suất 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. Tại cốt lõi lưới linh hoạt, giống như một phông chữ linh hoạt, vẫn có 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 đáp ứng.

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à bố trí thích ứng thành công!

Đặc biệt đối với người dùng trang web, chúng tôi cung cấp bài học thực tế về cách sử dụng hệ thống Lưới 960. Hãy tưởng tượng rằng chúng ta được giao một bản thiết kế bố cục. Đầu tiên, chúng ta phải phác thảo một kế hoạch triển khai cấu trúc trang web và chỉ sau đó mới tiến hành viết mã trực tiếp. Sau khi nghiên cứu bài viết này, bạn sẽ có thể xử lý mọi kiểu tóc cổ điển trong thời gian ngắn nhất và màu tóc tự nhiên trong nhiều năm (không có tóc bạc). Vì vậy, đây là thiết kế của chúng tôi:

1. Tạo lưới

Như bạn đã biết, hệ thống 960 Grid sử dụng toàn bộ các lớp và có sẵn trong một số biến thể (phiên bản 12 cột và 16 cột). Vùng chứa chính, bất kể số lượng cột, sẽ luôn rộng 960px. Đối với thiết kế này, chúng tôi sẽ chọn hệ thống 12 cột. Mỗi khối trong hệ thống 960 Grid có lề(lề) 0 10px. Điều này đảm bảo cho chúng tôi phần đệm đồng đều, tỷ lệ 20px. Đối với những người đang bối rối bởi kích thước 960px, tôi khuyên bạn nên xem sơ đồ này. Kích thước này là tối ưu cho phần lớn độ phân giải màn hình. Vì vậy, chúng tôi có khả năng tạo các khối có chiều rộng này:

• 140px
• 220px
• 300px
• 380px
• 460px
• 540px
• 620px
• 700px
• 780px
• 860px
• 940px

Mỗi kích thước có lớp riêng, tên của nó được đặt theo sơ đồ Grid_X, trong đó X là số cột. Nếu bạn cần khối 960px thì bạn nên chọn lớp Grid_12. Để kích hoạt hệ thống 960 Grid, bạn phải vùng chứa gốcđặt lớp container_12 hoặc container 16. Dưới đây là ví dụ nhỏ trang gồm 3 khối. Chiều rộng của cái đầu tiên bằng chiều rộng 960px, 2 cái còn lại lớn bằng một nửa:

Hãy nhớ rằng khi bạn lấp đầy một hàng bằng các khối có lớp Grid_X, hãy đảm bảo rằng tổng cộng chúng không quá 12. Ví dụ: như chúng ta có - hai khối Grid_6 + Grid_6 = 12. Có thể ít hơn: 6, 4 , 2, v.v. d. Bây giờ chúng ta đã xem qua các nguyên tắc cơ bản, chúng ta có thể bắt đầu bài tập thực tế:

2. Tạo một mô hình

Chúng ta hãy thử xây dựng một sơ đồ về những gì chúng ta cần tạo nên. Trước hết chúng ta cần 2 khối 960px. Một cho logo, một cho điều hướng. Tiếp theo là 2 khối (trên một dòng), dành cho áp phích và bản trình bày trang web, khối phân cách (toàn bộ chiều rộng), 4 cột (trên một dòng), lại là khối phân cách và chân trang. Một cái gì đó như thế này:

Tôi nghĩ sau khi xem hình ảnh bạn đã biết chúng tôi cần những lớp học nào. Hãy tự mình thử chúng, sau đó xem mã bên dưới để xem bạn có nghĩ đúng không:

Hãy nhớ rằng ở cuối mỗi dòng chúng ta cần chèn

để hiển thị bình thường trong tất cả các trình duyệt. Đừng quên đưa CSS 960 Grid vào trang của bạn trong phần đầu.

Vậy là bộ xương đã sẵn sàng, vì vậy đã đến lúc bắt đầu trang trí. Đặt chiều cao và màu nền bộ tách khối. Chiều cao của khối menu sẽ phụ thuộc vào chính menu đó. Ngoài ra, đừng quên thêm logo của bạn:

Div.spacer ( màu nền: #8FC73E; chiều cao: 1em; ) div#navbar ( màu nền: #8FC73E; phần đệm: 10px 0; )

Đây là những gì chúng ta sẽ nhận được:

Hiện tại chúng tôi không quan tâm đến thông tin chút nào nên bạn có thể chèn nội dung từ đây vào các cột trung tâm trang này. Trước khi bạn bắt đầu phần trên cùng, hãy chăm sóc phần dưới cùng. Trong thiết kế của chúng tôi, nền chân trang có màu màu xám. Hiện tại, chúng tôi không thể thực hiện điều này vì nếu bạn còn nhớ, có một số vết lõm giữa các khối sẽ không cho phép chúng tôi sơn hoàn toàn lên khu vực này. Để giải quyết vấn đề này chúng ta hãy di chuyển 3 khối liên quan đến footer thành các khối riêng biệt với id = footer. Một chi tiết nữa: khi chúng ta sử dụng các lớp trong các lớp, sẽ rất tốt nếu đặt các giá trị alpha (để cho biết khối nào sẽ là khối đầu tiên và omega - cho khối cuối cùng):

Div#footer ( màu nền: #e5e5e6; )

Hoàn hảo! Chân trang của chúng tôi bây giờ có màu nền. Thêm một số văn bản vào đó và chuyển sang khối điều hướng. Theo tất cả các luật nguyên tắc hiện đại bố cục, điều hướng là một danh sách không đánh số. Thêm mã và kiểu sau:

• Bài viết
• chủ đề
• Về
• Biên tập viên
• Liên hệ