Grid.css - Hệ thống lưới tối thiểu dành cho nhà phát triển web

Các khung giao diện lớn hơn như Bootstrap đi kèm với thiết lập lưới riêng. Nhưng, họ cũng đi kèm với rất nhiều hành lý ở dạng các thành phần trang được thiết kế sẵn và các thành phần JavaScript.

Nếu bạn đang tìm kiếm một hệ thống lưới nhỏ hơn và được sắp xếp hợp lý thì bạn sẽ thích Grid.css.

Thư viện mã nguồn mở miễn phí này được đóng gói với truyền thống Hệ thống lưới 12 col mà bạn có thể cấu trúc cho bất kỳ bố trí. CSS rất dễ sử dụng và chính tệp chỉ đo được 560 byte (đó là nửa KB!)

Bắt đầu là siêu dễ dàng và bạn chỉ cần một tệp CSS được thêm vào tiêu đề của bạn.

Bạn có thể tìm thấy liên kết tải trực tiếp trên trang chủ của Grid.css hoặc trong repo GitHub chính thức. Bạn thậm chí có thể sử dụng phiên bản CDN thô để nhúng tệp này trực tiếp từ GitHub mà không cần lưu trữ tệp.

Bây giờ, bạn có thể thiết lập cấu trúc cột của mình sử dụng bất kỳ yếu tố nào bạn muốn (divs, phần, v.v.).

Điều này thường bao gồm một .hàng phần tử (container) cùng với nhiều yếu tố cột nội bộ. Các lớp cột sử dụng số để xác định tổng không gian của chúng bên trong container, ví dụ như vậy, .col4 chiếm bốn cột trong tổng số mười hai.

Đây là một đoạn trích ví dụ từ bản demo:

Bạn có thể sử dụng bất kỳ sự kết hợp nào của các lớp cột mà bạn thích, miễn là chúng thêm tới 12.

Điều này có nghĩa là bạn cũng có thể tái cấu trúc trang tuy nhiên bạn muốn, bằng cách sử dụng container hàng khác nhau. Ví dụ: bạn có thể có một khoảng lớn cho tiêu đề của mình nhưng sử dụng hai thiết lập hàng / col khác nhau cho thân trang của bạn.

Đương nhiên, thư viện này là 100% miễn phí và mã nguồn mở, vì vậy bạn có thể tự do chỉnh sửa theo cách bạn thích.

Người sáng tạo, Ahmed Tarek, cũng làm Butns đó là một biến thể của nhiều bộ dụng cụ UI nút ngoài kia. Nó cặp độc đáo với Grid.css, vì vậy cả hai đều là những thư viện tuyệt vời để chọn khi bắt đầu một dự án web mới.