Giới thiệu về hệ thống lưới

Hệ thống lưới
Hệ thống lưới

Hệ thống lưới (grid system) là một khái niệm vô cùng quan trọng trong thiết kế. Dù là một lập trình viên, chúng ta cũng cần có những khái niệm về nó.

Hệ thống lưới (Grid System)

Bản thân mình là một lập trình viên, không có quá nhiều về kiến thức thiết kế. Do đó, những kiến thức mình chia sẻ do mình tích lũy tham khảo được. Thể hiện quan điểm cá nhân của mình khá nhiều. Nếu các bạn cần tham khảo các kiến thức chuyên sâu hơn. Các bạn cần tìm kiếm thông tin ở những trang web, diễn đàn chuyên về thiết kế.

Về cơ bản, hệ thống lưới là một cấu trúc bao gồm một loạt các đường ngang và dọc, được sử dụng để canh chỉnh việc sắp xếp nội dung. Một cách dễ hiểu hơn nó là một giải pháp giúp các nhà thiết kế có thể làm việc với cấu trúc, giúp cho việc trình bày cũng như quản lý nội dung và hình ảnh một cách dễ dàng hơn.

Một số ví dụ:

"<yoastmark

Hệ thống lưới trong báo in
Hệ thống lưới trong báo in
Hệ thống lưới trên web
Hệ thống lưới trên web

"<yoastmark

Chúng ta có thể thấy, hệ thống lưới được sử dụng khá phổ biến trong thiết kế. Tuy nhiên, chúng ta chỉ quan tâm trong lĩnh vực web.

Hệ thống lưới trong giao diện web

Người ta cũng ứng dụng hệ thống lưới vào thiết kế web. Chúng ta cần quan tâm đến 3 khái niệm cơ bản:

Hệ thống lưới - Thiết kế web
Hệ thống lưới – Thiết kế web
  1. Columns – cột
  2. Gutters –  khoảng cách giữa 2 cột
  3. Margins

Và thông thường, đối với giao diện web cơ bản (trên desktop) chúng ta sẽ chia giao diện thành 12 cột.

12 Cột
12 Cột

Tại sao lại là 12 cột mà không phải 6,9 hay 15 cột? Thực sự mình cũng không biết nguồn gốc của nó. Chỉ biết với 12 cột, chúng ta có thể xây dựng rất nhiều bố cục, một cách cực kỳ linh hoạt. Dưới đây là một vài ví dụ điển hình.

Bố cục 1 cột – 12/12

Bố cục 1 cột (12/12)
Bố cục 1 cột (12/12)

Bố cục 2 cột – 6/12 + 6/12

Bố cục 2 cột - 6/12 + 6/12
Bố cục 2 cột – 6/12 + 6/12

Bố cục 2 cột – 8/12 + 4/12

Bố cục 2 cột - 8/12 + 4/12
Bố cục 2 cột – 8/12 + 4/12

Bố cục 2 cột – 3/12 + 9/12

Bố cục 2 cột - 3/12 + 9/12
Bố cục 2 cột – 3/12 + 9/12

Bố cục 3 cột – 4/12 + 4/12 + 4/12

Bố cục 3 cột - 4/12 + 4/12 + 4/12
Bố cục 3 cột – 4/12 + 4/12 + 4/12

Bố cục 3 cột – 6/12 + 3/12 + 3/12

Bố cục 3 cột - 6/12 + 3/12 + 3/12
Bố cục 3 cột – 6/12 + 3/12 + 3/12

Bố cục 4 cột – 3/12 + 3/12 + 3/12 + 3/12

Bố cục 4 cột - 3/12 + 3/12 + 3/12 + 3/12
Bố cục 4 cột – 3/12 + 3/12 + 3/12 + 3/12

Kết luận

Sau một vài demo của mình, các bạn có nhận thấy được sự phổ biến của các giao diện phía trên không? Có thể xem, việc sử dụng hệ thống lưới với 12 cột trong thiết kế web hiện nay là một xu thế. Để đáp ứng xu thế đó, hầu hết các Frontend Frameworks lớn đều hỗ trợ hệ thống lưới. Hay khi chúng ta thiết kế 1 trang web mà không sử dụng các frameworks. Thì việc xây dựng hệ thống lưới cũng là một công việc khá cần thiết.