Grid system · làm quen với hệ thống lưới trong thiết kế

Làm quen với hệ thống lưới trong thiết kế

Grid system là gì? Trả lời nhanh (ColorME bổ sung, 17/10/2026)

Grid system (hệ thống lưới) là bộ khung gồm cột, khoảng cách giữa cột (gutter) và lề (margin) dùng để sắp xếp chữ, hình, khối trên trang theo một trật tự. Theo bài về lưới trong thiết kế giao diện của NN/g, lưới giúp trang dễ đọc, dễ quét mắt và nhất quán trên nhiều kích thước màn hình. Ba thành phần của mọi lưới:

Các mục ghi "ColorME bổ sung" được thêm ngày 17/10/2026; phần còn lại là bài gốc của tác giả.

Khi mới làm quen với thiết kế, việc sắp đặt các yếu tố như hình ảnh, cụm chữ, hình khối... sao cho “phù hợp” có lẽ cũng là một trở ngại đối với không ít người. Và hệ thống lưới (Grid System) là một trong những phương pháp hiệu quả mà bạn nên biết để góp phần giải quyết được vấn đề này.

Lịch sử

Trước khi được sử dụng trong thiết kế đồ họa, lưới đã xuất hiện từ đầu thế kỉ XX trong chủ nghĩa Constructivism (Xu hướng Tạo Dựng/Chủ nghĩa Kết Cấu) – một phong trào nghệ thuật và kiến trúc xuất hiện tại Nga thời đó. Tuy nhiên thuật ngữ Grid system hay hệ thống lưới trong thiết kế được chính thức trở thành một công cụ trong thiết kế đồ họa vào khoảng những năm 50 của thế kỉ trước, khi Müller-Brockmann, một Swiss designer tài năng phát triển và hợp lý hóa nó thông qua các cuốn sách của ông như: “Neue Grafik design journal” (1958–1965), “Grid Systems in Graphic Design” (1981).  

Hiiểu một cách đơn giản thì lưới thiết kế là hệ thống các đường căn gióng từ đó tạo nên bộ khung nền hỗ trợ việc quản lý và sắp xếp các yếu tố của thiết kế theo một trật tự nhất định.

Phân loại

Tùy thuộc vào các mục đích thiết kế khác nhau mà người ta cũng tạo ra các loại khung lưới khác nhau để dễ dàng sử dụng hơn. Dưới đây là một vài dạng lưới cơ bản thường thấy:

Lưới bản thảo hay lưới cột đơn (Single column grid)

Là loại lưới phố biến nhất mà bạn có thể bắt gặp ở bất kì ấn phẩm nào như sách báo hay các tấm poster. Nó là một khung hình chữ nhật đơn giản để chừa ra lề cho trang giấy và giúp bạn ước lượng được diện tích mà mình sẽ sử dụng là bao nhiêu. Cách chừa lề để tạo ra khung lưới này có thể đơn giản tùy ý người sử dụng, nhưng với một số quy chuẩn chúng cần được đảm bảo là hình chữ nhật vàng (được tạo ra theo tỉ lệ vàng).

Lưới nhiều cột (Mutilcolumn grid)

Lưới nhiều cột sẽ cho phép bạn sắp xếp các đối tượng thiết kế của mình một cách chi tiết và rõ ràng hơn khá nhiều so với lưới một cột. Giữa các cột sẽ có một khoảng trống nhỏ gọi là gutter (gutter cũng có thể bằng 0), giúp phân cách các đối tượng trong các cột với nhau. Với loại lưới này, bạn không hề bị bó hẹp bố cục trong từng cột mà hoàn toàn có thể linh hoạt sử dụng các cột đơn lẻ kết hợp với các nhóm cột đôi, cột ba.... Càng nhiều cột bạn tạo ra, thì hệ thống lưới của bạn càng trở nên linh động.

Lưới module (Modular grid)

Lưới nhiều cột sẽ trở nên chi tiết và cụ thể hơn nữa nếu kết hợp thêm với những đường gióng ngang, với mỗi ô được tạo thành là một module, và đó cũng là cách mà lưới module được hình thành.

Ghi chú của ColorME (17/10/2026): trong thiết kế giao diện, NN/g kể thêm một kiểu nữa là lưới phân cấp (hierarchical grid): nội dung được xếp theo mức quan trọng, phần quan trọng nhất chiếm ô lưới lớn nhất, như trang chủ báo điện tử. NN/g cũng ghi lưới module rất hợp với trang bán hàng, trang danh sách, vì các hàng lặp lại được.

Lưới đường cơ sở (Baseline grid)

Đây cũng là một dạng lưới module, tuy nhiên các module được phân chia dựa trên các đường baseline (các dòng văn bản) trên ấn phẩm. Có nghĩa là trước khi xác lập lưới này bạn phải chủ động lựa chọn size chữ cũng như khoảng cách giữa các dòng. Cách này cũng khác phục được hiện tượng bị lẻ module do không khớp với kích thước file, bởi vì bạn có thể tự do điều khiển số lượng dòng nên việc chia module cũng trở nên dễ dàng hơn. Lưới này thường  phù hợp với những ấn phẩm nhiểu chữ như báo hay tạp chí.

Ghi chú của ColorME (17/10/2026): theo hướng dẫn baseline grid của InDesign (Adobe), trong InDesign có thể đặt baseline grid ở Edit > Preferences > Grids (macOS: InDesign > Preferences > Grids); ô Increment Every nên bằng khoảng cách dòng (leading) của chữ thân bài, ví dụ chữ có leading 12 pt thì nhập 12 pt.

Vai trò

Tổ chức

Với hệ thống khung lưới, bạn có sẽ luôn có các đường căn gióng tiện lợi để sắp đặt các yếu tố hình ảnh cho đến nội dung của bản thiết kế sao cho thật ngăn nắp và rõ ràng. Bên cạnh đó, khung lưới cũng sẽ hỗ trợ bạn dễ dàng hình dung hơn về không gian nên sử dụng của thiết kế.

Cân bằng

Dù là cân bằng đối xứng hay bất đối xứng, các ô lưới được phân chia ra sẽ cho bạn một cái nhìn  trực quan và thuận lợi hơn để cân đối bố cục và đảm bảo được sự cân bằng cho thiết kế.

Tạo ra sự thống nhất và linh hoạt

Như đã nói ở phần phân loại lưới nhiều cột, bạn hoàn toàn có thể điều chỉnh các thiết kế của mình vừa đồng bộ lại vừa đa dạng theo khung lưới. Ví dụ như lưới 12 cột chẳng hạn, bạn có thể dàn nội dung thành 2 hoặc 3 và thậm chí là 4 cột tùy theo các trang khác nhau với chỉ 1 loại lưới duy nhất.

Phân cấp thông tin

Có lẽ với những ấn phẩm có nhiều nội dung thì dàn trang với khung lưới là không thể thiếu được. Thông qua hệ thống  lưới, bạn sẽ thuận lợi hơn khi căn chỉnh khoảng cách giữa các đối tượng, đồng thời tạo ra sự tách biệt và phân cấp nội dung một cách rõ ràng và hiệu quả.

Ứng dụng

Lưới trong thiết kế UI UX

Bên cạnh việc hỗ trợ sắp đặt layout thông thường thì hệ thống lưới còn có vai trò đặc biệt quan trọng trong thiết kế Responsive website (phong cách thiết kế website phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình). Khi có một hệ thống lưới linh hoạt và hiệu quả, website của bạn cũng sẽ trở nên chuyên nghiệp hơn khi luôn đẹp và đồng bộ dù ở bất kì thiết bị hay chế độ nào.

Ghi chú của ColorME (17/10/2026): ví dụ quen thuộc nhất của lưới 12 cột là Bootstrap. Theo tài liệu Grid của Bootstrap, mỗi hàng có 12 cột mẫu, lớp col-4 nghĩa là chiếm 4 trên 12 cột, độ rộng tính theo phần trăm, và lưới có 6 mức responsive (breakpoint) dựa trên độ rộng tối thiểu của màn hình. Vì 12 chia hết cho 2, 3, 4 và 6, nội dung dễ chia thành 2, 3, 4 hoặc 6 khối như tác giả nói.

Lưới trong in ấn

Bởi vì hệ thống lưới là một công cụ rất đắc lực trong phân cấp thông tin nên cũng dễ hiểu khi dàn trang in ấn sử dụng  rất nhiều đến lưới. Dù là một tấm poster đơn lẻ hay cả một cuốn tạp chí trăm trang thì sử dụng lưới luôn tiện lợi và dễ dàng hơn, đặc biệt là với những người mới bắt đầu.

Cách dựng grid system trong Figma, InDesign và web (ColorME bổ sung, 17/10/2026)

Nguồn: hướng dẫn layout guide của Figma, tài liệu Grid của Bootstrap, hướng dẫn baseline grid của InDesign (Adobe).

Muốn có ngay số đo cột, công cụ Tính lưới cột layout của ColorME ghi trên trang là tính độ rộng cột, gutter và lề cho lưới 12 cột web, tablet, mobile, xuất CSS Grid và thông số Figma.

Các bước dựng lưới cho một trang (ColorME bổ sung, 17/10/2026)

1. Xác định khổ: khổ in (A4, poster) hoặc màn hình (điện thoại, máy tính).
2. Đặt lề trước, rồi chọn số cột: ít cột cho trang đơn giản, 12 cột cho web nhiều khối.
3. Chọn gutter: đủ rộng để tách nội dung các cột.
4. Với trang nhiều chữ, đặt baseline grid bằng khoảng cách dòng của chữ thân bài.
5. Đặt các khối nội dung theo mép cột; khối quan trọng chiếm nhiều cột hơn.
6. Thử phá lưới có chủ đích ở một điểm nhấn, nhưng giữ phần còn lại thẳng hàng.

Xem thêm ví dụ trực quan về 5 dạng lưới trong thiết kế.

Câu hỏi thường gặp (ColorME bổ sung, 17/10/2026)

Grid system là gì?

Là hệ thống lưới gồm cột, gutter và lề, dùng làm khung để sắp xếp chữ, hình và khối trên trang theo trật tự, giúp bố cục dễ đọc và nhất quán.

Gutter là gì?

Gutter là khoảng trống giữa các cột trong lưới, giúp tách nội dung của các cột với nhau.

Vì sao web hay dùng lưới 12 cột?

Vì 12 chia hết cho 2, 3, 4 và 6 nên dễ chia nội dung thành nhiều khối bằng nhau; Bootstrap dùng 12 cột mẫu cho mỗi hàng.

Có những loại lưới nào?

Lưới một cột, lưới nhiều cột, lưới module, baseline grid và lưới phân cấp (hierarchical grid).

Baseline grid đặt bao nhiêu là đúng?

Nên đặt bước lưới bằng khoảng cách dòng của chữ thân bài, ví dụ chữ leading 12 pt thì baseline grid 12 pt.

Sử dụng lưới là một phương pháp hữu dụng giúp bạn quản lý, sắp xếp và sáng tạo các layout thiết kế của mình. Tuy nhiên, đừng quên nó vẫn chỉ là một công cụ và không phải là sự đảm bảo cho  thành công của thiết kế. Bởi vậy hãy có cái nhìn đúng đắn và sử dụng công cụ này thật hợp lý có thể hiện thực được ý tưởng của bạn một cách thật hiệu quả.­