Tạo bố cục hiện đại dễ dàng với Hệ thống lưới CSS Gridlex

Frontend phát triển đã được cải thiện triệt để với sự ra đời của CSS flexbox. Điều này làm cho nó dễ dàng hơn nhiều tạo lưới & cột đó tự nhiên thay đổi cho bố trí đáp ứng.

Thay vì mã hóa lưới flexbox của riêng bạn từ đầu, việc sử dụng một công cụ như là dễ dàng hơn nhiều Lưới. Thư viện flexbox mã nguồn mở miễn phí này là siêu nhẹ và rất Dễ dàng tùy chỉnh.

Tất cả những gì bạn làm là thêm biểu định kiểu Gridlex đến trang web của bạn và làm việc với các lớp lưới của nó. Các cột nội bộ có một lớp .col và bạn bọc tất cả những thứ này vào trong .lưới điện thùng đựng hàng. Điều này xác định mỗi cột ở cùng chiều rộng và tạo ra một giao diện thống nhất.

Mặc định này có thể bị ghi đè bằng cách thêm định cỡ đến từng cột. Bằng cách này, bạn có thể có một cột ở chiều rộng 70% và một cột khác ở chiều rộng 30% (ví dụ: nội dung / thanh bên).

Bạn sẽ tìm thấy hàng tấn mẫu lưới trên trang chủ Gridlex với bản demo sống và đoạn mã để sao chép / dán vào trang web của bạn. Đó là một thư viện khổng lồ với rất nhiều các lớp tùy chọn để giúp bạn xây dựng các lưới đơn giản nhất cho bất kỳ trang web nào.

Tất cả các lưới cộng lại thành một tổng cộng 12 cột nhỏ, để bạn có thể xác định mỗi cột sẽ chiếm bao nhiêu dung lượng. Điều này có vẻ khó hiểu nhưng nó có ý nghĩa khi bạn nhìn thấy các bản demo trực quan.

Đây là một mã ví dụ được sử dụng cho lưới lớn hơn với độ rộng khác nhau:

  Giáo dục 
 Giáo dục 
 Giáo dục

Lưu ý rằng .lưới điện lớp chứa mọi thứ và các cột cố gắng chia thành 12 phần (trong ví dụ này sẽ là ⅓ chiều rộng cho mỗi cái). Tuy nhiên, các cột cố định nhịp 2 và 6 cols tương ứng, vì vậy cột đầu tiên sử dụng chiều rộng tự động dựa trên những gì còn lại.

Sử dụng hai cột còn lại, chúng ta có thể suy luận rằng sẽ có 4 cột (12-6-2) còn lại đạt tổng cộng 12. Đó là tất cả các phép toán rất đơn giản nhưng tên lớp có thể gây nhầm lẫn. Khi bạn bắt đầu chơi với Gridlex trên một dự án, bạn sẽ nhanh chóng chọn hệ thống đặt tên.

Gridlex hiện đang trong phiên bản 2.x và nó liên tục được cập nhật trên GitHub. Khi hỗ trợ trình duyệt tăng lên, tôi sẽ đảm bảo sự chú ý nhiều hơn đến flexbox, với nhiều trang web hơn áp dụng mô hình này cho lưới trang.

Bạn thậm chí có thể tìm thấy một bộ sưu tập đầy đủ của các trang web đang chạy Gridlex để xem giao diện này như thế nào khi được áp dụng cho các trang web trực tiếp.

Nếu bạn chưa từng sử dụng flexbox trước đây thì Gridlex có thể là một thư viện thú vị để chơi. Nhưng tôi cũng khuyên bạn nên thực hành trước tiên bằng cách sử dụng các trò chơi flexbox thú vị để kiểm tra kiến thức của bạn và giúp bạn hiểu các nguyên tắc cơ bản.

Gridlex là có sẵn miễn phí trong repo GitHub hoặc bạn có thể kéo nó qua npm hoặc bower. Nó cung cấp tài liệu đầy đủ trên trang web chính, bao gồm các bản trình diễn cho các cột có chiều rộng khác nhau và truy vấn phương tiện.

Bạn có toàn quyền kiểm soát qua thiết kế flexbox và nó chỉ mất một vài lớp CSS để làm cho nó xảy ra! Và nếu bạn có câu hỏi nhanh hoặc muốn chia sẻ trang web bạn đã xây dựng bằng Gridlex, bạn có thể nhắn tin cho người tạo trên Twitter @webdevlint.