Foundation - Lưới

Sự miêu tả

Hệ thống lưới móng quy mô lên đến 12 cột thông qua trang. Hệ thống lưới được sử dụng để tạo bố cục trang thông qua một loạt các hàng và cột chứa nội dung của bạn.

Tùy chọn lưới

Bảng sau đây cho biết ngắn gọn về cách thức hoạt động của hệ thống lưới Foundation trong nhiều thiết bị.

	Thiết bị nhỏ Điện thoại (<640px)	Thiết bị trung bình Máy tính bảng (> = 640px)	Thiết bị lớn Máy tính xách tay & Máy tính để bàn (> = 1200px)
Hành vi lưới	Ngang mọi lúc	Thu gọn để bắt đầu, nằm ngang phía trên các điểm ngắt	Thu gọn để bắt đầu, nằm ngang phía trên các điểm ngắt
Tiền tố lớp	.nhỏ-*	.Trung bình-*	.large- *
Số cột	12	12	12
Lồng được	Đúng	Đúng	Đúng
Bù đắp	Đúng	Đúng	Đúng
Thứ tự cột	Đúng	Đúng	Đúng

Cấu trúc cơ bản của lưới nền tảng

Sau đây là cấu trúc cơ bản của lưới Foundation -

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

Đầu tiên, tạo một lớp hàng để tạo các nhóm cột theo chiều ngang.
Nội dung phải được đặt trong các cột và chỉ các cột mới có thể là con ngay lập tức của các hàng.
Cột lưới được tạo bằng cách chỉ định số lượng mười hai cột có sẵn mà bạn muốn kéo dài. Ví dụ: đối với bốn cột bằng nhau, chúng tôi sẽ sử dụng .large-3

Sau đây là ba lớp được sử dụng trong hệ thống lưới Foundation -

Sr.No.	Mô tả & lớp Lưới cơ bản
1	Lớn Các lớp Large- * được sử dụng cho các thiết bị lớn.
2	Trung bình Lớp medium- * được sử dụng cho các thiết bị trung bình.
3	Nhỏ lớp small- * được sử dụng cho các thiết bị nhỏ.

Lưới nâng cao

Sau đây là các định dạng lưới nâng cao được sử dụng trong Foundation.

Sr.No.	Mô tả & Lưới nâng cao
1	Cột / Hàng kết hợp Các lớp cột và hàng được sử dụng trên cùng một phần tử để lấy cột có chiều rộng đầy đủ để sử dụng làm vùng chứa.
2	Làm tổ Chúng ta có thể lồng các cột lưới bên trong các cột khác.
3	Bù đắp Sử dụng lớp lớn-offset- * hoặc nhỏ-offset- * , bạn có thể di chuyển các cột sang bên phải.
4	Hàng không đầy đủ Foundation sẽ tự động di chuyển phần tử cuối cùng sang bên phải khi các hàng không bao gồm cột tối đa 12.
5	Thu gọn / Bỏ thu gọn hàng Sử dụng kích thước truy vấn phương tiện, các lớp thu gọn và thu gọn được đưa vào phần tử hàng để hiển thị các phần đệm.
6	Các cột ở giữa Bằng cách bao gồm lớp nhỏ ở giữa trong cột, bạn có thể tạo cột ở giữa.
7	Đặt hàng nguồn Lớp sắp xếp nguồn được sử dụng để chuyển các cột giữa các điểm ngắt.
số 8	Lưới khối Lưới khối được sử dụng để chia nhỏ nội dung.

Xây dựng theo ngữ nghĩa

Sử dụng tập hợp các mixin SASS, một CSS lưới được tạo ra được sử dụng để xây dựng lưới ngữ nghĩa của riêng bạn. Để biết thêm thông tin, bấm vào đây

Tham chiếu SASS

Sau đây là tham chiếu SASS cho lưới được sử dụng trong Foundation.

Sr.No.	Mô tả & Lưới cơ bản
1	Biến Sử dụng các biến sass, chúng ta có thể sửa đổi các kiểu mặc định của thành phần này.
2	Mixin Đầu ra CSS cuối cùng được xây dựng bằng cách sử dụng mixin.