Grid System trong Responsive Web Design

Nên đọc trước

  1. Tìm hiểu CSS Reset và Normalize.css

Grid System là gì?

Grid System là một thuật ngữ được dùng trong thiết kế, đó là cách bố trí nội dung lên một trang giấy thành các ô lưới. Bạn có thể thấy dạng Grid System này nhiều trên các tờ báo giấy, tạp chí. Nay Grid System lại được áp dụng rộng rãi trong lĩnh vực thiết kế web, đặc biệt là Responsive Web Design.

Trong thiết kế web, Grid System là cách thức chia nhỏ layout web ra thành nhiều dòng (row) và cột (column), các Grid System thông dụng thường chia thành 12 hoặc 16 cột. Mỗi thành phần khi đặt vào layout, bạn sẽ chỉ định cho nó chiếm kích thước là bao nhiêu cột, mỗi cột này sẽ chiếm % nhất định kích thước của layout. Như vậy, thay vì chỉ định rõ ràng kích thước là 900px, 800px thì giờ bạn sẽ dùng đơn vị là cột. Ví dụ: Bạn sử dụng Grid System có tổng số cột là 12, bạn muốn thiết kế website gồm 2 phần, phần bên trái nhỏ và bên phải lớn, bạn có thể cho phần bên trái là 4 cột và bên phải là 8 (4+8 = 12 vừa bằng tổng số cột).

Grid System trong Responsive Web Design

Các thuật ngữ

PushPull: Mặc định, các cột trong Grid System sẽ xếp theo hàng ngang từ trái qua phải. Tuy nhiên, bạn có thể đẩy (push) một cột sang phải hoặc kéo (pull) một cột về trái để tùy biến nhằm tạo ra một layout linh hoạt hơn.

PrefixSuffix: Quy định khoảng cách trước và sau giữa các cột.

AlphaOmega: Alpha là loại bỏ margin phía trước còn Omega là loại bỏ margin phía sau.

CSS framework hỗ trợ Grid System

Bạn có thể tự xây dựng một bộ Grid System để sử dụng riêng. Ở đây mình sẽ giới thiệu một số CSS framework thông dụng có hỗ trợ Grid System:

  1. Foundation: Được xem là framework responsive đầy đủ đầu tiên kể từ khi nó được phát hành vào năm 2011. Tìm hiểu sơ lược về Foundation, mình thích framework này nhất ở điểm tùy biến về nội dung, Foundation cho phép bạn trình bày các nội dung khác nhau ở nhiều kích thước màn hình khác nhau. Ví dụ, bạn có thể sử dụng tập tin hình ảnh lớn trên PC và sử dụng tập tin hình ảnh nhỏ trên mobile, điều này thật sự làm tăng đáng kể tốc độ truy cập website trên mobile. Không chỉ có hệ thống CSS hỗ trợ responsive web design, Foundation còn có một hệ thống javascript khá mạnh nữa nhé.
  2. Bootstrap: Là một CSS framework phổ biến hiện nay do Twitter phát triển. Cũng như các framework khác, Bootstrap giúp bạn giảm thiểu thời gian thiết kết HTML & CSS. Bootstrap định nghĩa sẵn các class CSS và công việc của bạn chỉ là sử dụng các class đó vào mục đích của mình.
  3. Skeleton: Cung cấp một bộ các tập tin CSS hỗ trợ bạn nhanh chóng xây dựng nên layouts bằng Grid System. Ngoài ra, Skeleton còn cung cấp các tính năng cơ bản như CSS Reset hay Nomalize.css, giúp bạn bố cục layout dễ dàng hơn.

Và còn nhiều CSS framework khác nữa đang chờ bạn khám phá.

Nên đọc tiếp