Giới thiệu về Mô-đun Bố cục Lưới CSS

Nó đã từng những cái bàn, sau đó lề và phao, sau đó hộp linh hoạt và bây giờ lưới điện: CSS luôn hướng đến những cách mới và tốt hơn để giảm bớt công việc lâu đời của bố trí web mã hóa. Các Mô hình bố cục lưới CSS có thể tạo và cập nhật bố cục dọc theo hai trục: ngang và dọc, ảnh hưởng đến cả chiều rộng và chiều cao của các yếu tố.

Bố cục lưới không phụ thuộc vào vị trí của các thành phần trong đánh dấu, do đó, bạn có thể xáo trộn vị trí của các yếu tố trong đánh dấu mà không thay đổi bố cục. Trong mô hình lưới, một phần tử chứa lưới là chia thành các cột và hàng lưới (gọi chung là đường ray lưới) bởi đường lưới. Bây giờ hãy xem làm thế nào để tạo lưới mẫu.

Hỗ trợ trình duyệt

Khi viết bài viết này, Mô-đun lưới CSS chỉ được hỗ trợ bởi trình duyệt IE và Edge mới nhất. Lưới CSS là trong giai đoạn thử nghiệm trong các trình duyệt chính khác mà bạn phải kích hoạt hỗ trợ bằng tay:

• Firefox: Nhấn Shift + F2, nhập lệnh sau vào thanh đầu vào GCLI xuất hiện ở cuối trình duyệt: pref set layout.css.grid.enables true.
• Chrome: Duyệt qua chrome: // cờ URL và kích hoạt Các tính năng nền tảng web thử nghiệm.

Tất cả các hỗ trợ trình duyệt chính có khả năng đến sớm / giữa năm 2017.

Một lưới mẫu

Đến biến một phần tử thành một thùng chứa lưới bạn có thể dùng một trong ba trưng bày tính chất:

1. hiển thị: lưới; - yếu tố là chuyển đổi sang một container lưới khối
2. hiển thị: nội tuyến-lưới; - yếu tố là chuyển đổi sang một thùng chứa lưới nội tuyến
3. hiển thị: subgrid; - nếu phần tử là một mục lưới chuyển đổi thành một subgrid mà bỏ qua các mẫu lưới và thuộc tính khoảng cách lưới

Giống như một bảng bao gồm nhiều ô của bảng, một lưới là bao gồm nhiều ô lưới. Một mục lưới là được gán cho một tập hợp các ô lưới được gọi chung là khu vực lưới.

Chúng tôi sẽ tạo ra một lưới với năm phần (khu vực lưới): trên cùng, dưới cùng, trái, phải và trung tâm. HTML bao gồm năm div bên trong một div container.

 
 
Hàng đầu
 
Trái
 
trung tâm
 
Đúng
 
Dưới cùng
 
 

Trong CSS, khu vực lưới-mẫu bất động sản định nghĩa một lưới với các khu vực lưới khác nhau. Trong giá trị của nó, một chuỗi đại diện cho một hàng lưới và mỗi tên hợp lệ trong một chuỗi đại diện cho một cột. Đến tạo một ô lưới trống bạn cần sử dụng dấu chấm (.) tính cách trong một chuỗi hàng.

Các tên khu vực lưới được tham chiếu bởi khu vực lưới tài sản của các mục lưới riêng lẻ.

 .thùng chứa lưới width: 500px; chiều cao: 500px; hiển thị: lưới; lưới-mẫu-khu vực: "trên cùng trên cùng" "trung tâm bên trái bên phải" "dưới cùng dưới cùng";  .grid-top lưới-khu vực: đầu;  .grid-bottom lưới-area: bottom;  .grid-left lưới-khu vực: trái;  .grid-right lưới-khu vực: phải;  .grid-centre lưới-khu vực: trung tâm;  

Vì vậy, mã này tạo ra một lưới có ba hàng và cột. Các hàng đầu mục chiếm một diện tích kéo dài ba cột trong hàng đầu tiên và dưới cùng mục kéo dài ba cột ở hàng cuối cùng. Mỗi trái, trung tâm và đúng vật phẩm mất một cột ở hàng giữa.

Bây giờ chúng ta cần phải gán kích thước đến các hàng và cột này. Các lưới-mẫu-cột và lưới-mẫu-hàng tính chất xác định kích thước của rãnh lưới (hàng hoặc cột).

 .thùng chứa lưới width: 500px; chiều cao: 500px; hiển thị: lưới; lưới-mẫu-khu vực: "trên cùng trên cùng" "trung tâm bên trái bên phải" "dưới cùng dưới cùng"; lưới-mẫu-cột: 100px tự động 100px; lưới-mẫu-hàng: 50px tự động 150px;  

Đây là cách lưới CSS của chúng tôi trông bây giờ (với một số kiểu bổ sung):

Khoảng cách giữa các mục lưới

Bạn có thể thêm khoảng trống giữa cột và hàng sử dụng lưới-cột-khoảng cách và lưới-hàng-khoảng cách, hoặc tài sản lâu năm của họ khoảng cách lưới.

 .thùng chứa lưới width: 500px; chiều cao: 500px; hiển thị: lưới; lưới-mẫu-khu vực: "trên cùng trên cùng" "trung tâm bên trái bên phải" "dưới cùng dưới cùng"; lưới-mẫu-cột: 100px tự động 100px; lưới-mẫu-hàng: 50px tự động 150px; khoảng cách lưới: 5px 5px;  

Dưới đây bạn có thể thấy rằng khoảng cách lưới thực sự thêm khoảng cách giữa các mục lưới.

Căn chỉnh nội dung và các mục lưới

Các nội dung biện minh tài sản của container lưới (.thùng lưới) căn chỉnh nội dung của lưới dọc theo trục nội tuyến (trục ngang) và tài sản nội dung phù hợp, căn chỉnh nội dung của lưới dọc theo trục khối (trục dọc). Cả hai tính chất có thể có một trong những giá trị này: khởi đầu, kết thúc, trung tâm, không gian giữa, không gian xung quanh và không gian đồng đều.

Nếu áp dụng, kích thước theo dõi (hàng hoặc cột) thu nhỏ để phù hợp với nội dung khi căn chỉnh. Hãy nhìn vào ảnh chụp màn hình của nội dung lưới phù hợp với các giá trị khác nhau phía dưới.

justify-content: bắt đầu;

nội dung biện minh: kết thúc;

justify-content: trung tâm;

justify-content: không gian giữa;

justify-content: không gian xung quanh;

justify-content: không gian đồng đều;

align-content: bắt đầu;

align-content: end;

align-content: trung tâm;

align-content: khoảng trống giữa;

align-content: không gian xung quanh;

align-content: không gian đồng đều;

Cả hai nội dung biện minh và nội dung phù hợp tính chất căn chỉnh toàn bộ nội dung trong một lưới.

Đến căn chỉnh các mục riêng lẻ trong khu vực lưới của họ, sử dụng cặp thuộc tính khác: vật phẩm và vật phẩm. Cả hai có thể có một trong những giá trị sau: khởi đầu, kết thúc, trung tâm, đường cơ sở (căn chỉnh các mục dọc theo đường lưới cơ sở của khu vực) và căng ra (các mục điền vào toàn bộ khu vực của họ).