Grid là gì? Tất tần tật về grid trong thiết kế đồ họa

Chúng ta thường bắt gặp những hình lưới hay thiết kế dạng lưới trong các máy ảnh, ứng dụng chụp ảnh trên điện thoại hay các bản vẽ trong photoshop. Vậy rốt cuộc những hình lưới này có tác dụng gì, đóng vai trò, ảnh hưởng gì trong việc thiết kế ? Hãy cùng ColorME cùng bạn giải đáp những thắc mắc trên nhé !

Trả lời nhanh: grid là gì?

Grid (lưới, hệ thống lưới) là bộ khung gồm các đường dọc và ngang chia trang giấy hoặc màn hình thành lề, cột, hàng và ô. Designer đặt chữ, ảnh và nút bấm bám theo các đường đó, nên bố cục thẳng hàng, khoảng cách đều và các trang trong cùng một sản phẩm giống nhau về nhịp điệu. Trong lập trình web, "grid" còn chỉ CSS Grid, cách dựng chính bộ khung ấy bằng mã.

Phần trả lời nhanh, bảng và các mục có ghi "ColorME bổ sung" được thêm ngày 14/10/2026. Lưới 8 điểm là thói quen thường gặp của người làm giao diện, không phải một tiêu chuẩn.

Sáu loại lưới trong bảng trên; phần màu cam là lưới. Hình do ColorME tự dựng.

1.     Grid là gì ?

Grid (lưới) hay đầy đủ hơn là grid system (hệ thống lưới) là một thuật ngữ quen thuộc đối với giới làm đồ hoạ. Đây được coi là công cụ “tủ” giúp các graphic designer có thể căn lề, kích thước, phân chia ranh giới trong bố cục thiết kế nhằm tạo ra một tổng thể ngăn nắp, chỉn chu, có quy luật. Grid system được coi là xương sống, là bộ khung trong hầu hết các ấn phẩm infographics hay thuyết trình. 

2.     Các thể loại grid ?

 Khi bắt đầu một thiết kế một sản phẩm, các designer thường sử dụng một hay nhiều loại lưới để tổ chức, sắp xếp các chủ thể theo một bố cục nhất định. Việc làm này tạo ra sự cân bằng trong thiết kế cũng như góp phần tạo sự thuận mắt cho người xem khi nhìn vào sản phẩm thiết kế. Mặc dù bị “gò bó” trong những công thức toán học cố định tuy nhiên trong nhiều thời điểm, grid vẫn giúp các nhà thiết kế tạo ra sự đột phá, độc đáo trong từng ấn phẩm của mình. 

Về cơ bản, hệ thống lưới được bố trí dựa trên hai trường phái: đối xứng hoặc không đối xứng. Các lưới đối xứng sẽ tuân theo một đường trung tâm. Các lề dọc, lề ngang được thiết kế bằng nhau, các cột trong bố cục đối xứng cũng sẽ có cùng một chiều rộng tạo ra sự hài hoà về mặt tổng thể. Trong khi đó, ở chiều ngược lại, hệ thống lưới không đối xứng sẽ có kích thước của cả lề và cột khác nhau. Dưới đây là 5 thể loại lưới cơ bản được sử dụng trong nhiều ấn phẩm thường ngày:

Manuscript Grid – lưới bản thảo

Trong các bộ tài liệu Word, tạp chí, báo, ebook chính là ví dụ điển hình cho việc sử dụng lưới bản thảo. Các lưới bản thảo được thấy rõ trong một văn bản tài liệu bởi việc tách bạch phần đầu trang, chân trang và khoảng trắng ở mỗi cạnh (lề). Hiểu một cách đơn giản, bố cục lưới bản thảo được tạo ra từ một hình chữ nhật nhằm tạo ra một bộ khung giới hạn cho văn bản.

Column Grid – lưới cột

Lưới cột được sử dụng nhằm tổ chức bố cục thiết kế dưới dạng cột. Các tạp chí thường sử dụng lưới cột như một cách hữu hiệu để dễ đọc được các văn bản. Ngoài ra, lưới cột còn được sử dụng phổ biến trên các trang web hay blog trực tuyến. Hệ thống lưới cột thường được chia chủ yếu trong khoảng từ hai đến sáu cột. Văn bản và hình ảnh trong một lưới cột được đặt theo các đường thẳng đứng và dòng chảy tạo nên cột. Hình ảnh có thể được đặt bên trong một cột hoặc nhiều hơn nhằm tạo bố cục hình ảnh khác nhau.

Modular Grid – lưới mô đun

Các lưới mô đun cũng tương tự như lưới cột khi sở hữu các cột, tuy nhiên đồng thời có thêm các hàng. Lưới mô đun có mô đun kích thước bằng nhau, điều này giúp dễ dàng hơn trong việc sáng tạo, phá vỡ các quy tắc nhằm sử dụng các không gian theo nhiều cách khác nhau. 

Lưới mô đun thường được thấy trong nhiều các trang web thương mại điện tử, ngoài ra điển hình nhất cho việc sử dụng lưới mô đun chính là màn hình chính của smartphone (các ứng dụng được sắp xếp cạnh nhau theo dạng lưới mô đun) hay Instagram cũng sử dụng lưới mô đun để hiển thị nguồn cấp dữ liệu của bạn.

Thuật ngữ trong bài: Hệ thống lưới, Column grid, Tỉ lệ vàng (giải thích trong thư viện thuật ngữ thiết kế của ColorME).

Hierarchical Grid – lưới phân cấp

Lưới phân cấp được sử dụng chủ yếu trong thiết kế web. Mục đích của lưới phân cấp là tổ chức các yếu tố theo thứ tự quan trọng. Phần “mắt lưới” có không gian lớn nhất được ưu tiên cho các nội dung quan trọng nhất. So với các loại lưới còn lại, lưới phân cấp ít được sử dụng và ít phổ biến hơn. 

Composite Grid – lưới tổng hợp

Trộn lưới là hình thức phổ biến nhằm tạo thiết kế bố trí sáng tạo và hấp dẫn hơn. Một tài liệu nhiều trang sẽ tuân theo các phép đo giống nhau của lưới bản thảo nhưng đồng thời xuất hiện các lưới khác nhau cho các phần khác của định dạng. Sử dụng lưới tổng hợp một cách sáng tạo sẽ làm cho thiết kế của bạn trông dễ chịu hơn. Tuy nhiên để làm được điều này, chúng ta phải tốn kha khá thời gian để thực hành.

Baseline Grid và lưới 8 điểm (ColorME bổ sung)

Ngoài 5 loại trên, có hai loại lưới bạn sẽ gặp thường xuyên. Baseline grid (lưới dòng cơ sở) là các đường ngang cách đều nhau để chân chữ ở mọi cột nằm trên cùng một hàng. Theo trang trợ giúp InDesign của Adobe, khoảng cách giữa các đường nên bằng đúng khoảng cách dòng của chữ nội dung: chữ có leading 12 pt thì nhập 12 pt.

Lưới 8 điểm dùng cho giao diện: chiều cao nút, khoảng đệm, khoảng cách giữa các khối đều là bội số của 8. Hai loại này thường dùng chồng lên lưới cột chứ không thay thế nó.

Chân chữ hai cột nằm trên các đường cách nhau 12 pt; khoảng cách trong thẻ là bội số của 8. Hình do ColorME tự dựng.

Cấu tạo của một hệ thống lưới

Bảy thành phần trong bảng, trên trang A4 dọc 6 cột, lề 15 mm, rãnh 6 mm. Hình do ColorME tự dựng.

Ví dụ tính lưới: desktop 1440 px, điện thoại 390 px và trang A4

Công thức chung: chiều rộng khung = 2 × lề + số cột × chiều rộng cột + (số cột − 1) × rãnh. Ba bộ số dưới đây do ColorME tự tính để minh họa, là ví dụ chứ không phải tiêu chuẩn; bạn đổi lề và rãnh theo sản phẩm của mình.

Khi một khối chiếm nhiều cột, chiều rộng của nó gồm cả các rãnh nằm giữa. Với lưới 1440 px ở trên: 3 cột rộng 304 px, 4 cột rộng 416 px, 6 cột rộng 640 px, 8 cột rộng 864 px và cả 12 cột rộng 1312 px. Khổ A4 là 210 × 297 mm theo bảng khổ giấy của Adobe.

Bộ số trong bảng vẽ đúng tỉ lệ; ví dụ do ColorME tự tính, không phải tiêu chuẩn. Hình do ColorME tự dựng.

Không muốn tính tay, bạn mở công cụ Tính lưới cột của ColorME: "Nhập khung, số cột, gutter và lề, nhận ngay độ rộng từng cột". Trang công cụ có sẵn mẫu "Desktop 1440, Laptop 1280, Tablet 768 và Mobile 360". Về cột ra số lẻ như 77,5 px, trang này ghi: "Vẫn dùng được, nhưng cột số nguyên giúp thiết kế sắc nét và dễ canh hơn".

Con số mà các hệ thống thiết kế tự công bố

Các con số dưới đây đọc trên trang chính thức của từng bên ngày 14/10/2026.

Người làm giao diện nên xem thêm bài UI/UX là gì và bài về prototype, bước mà lưới được kiểm tra trên màn hình thật.

Cách tạo lưới trong Figma, InDesign, Illustrator và Photoshop

Tên menu giữ nguyên tiếng Anh như trên trang trợ giúp của Figma và Adobe, đọc ngày 14/10/2026.

Figma: Layout guide (tên cũ là Layout grid)

Lưu ý tên gọi: theo trang trợ giúp của Figma, tính năng "layout grid" đã được đổi tên thành "layout guide" từ tháng 5/2025, và khác với tùy chọn grid của auto layout. Có ba kiểu: Uniform grid (lưới ô vuông), Column và Row.

1. Chọn một frame.
2. Ở thanh bên phải, mục Layout guide, bấm Add layout guide. Figma thêm sẵn một uniform grid.
3. Bấm biểu tượng Layout guide settings, đổi kiểu sang Column (hoặc Row).
4. Nhập Count (số cột), chọn Type: Left, Center, Right hoặc Stretch.
5. Với Stretch, nhập Margin và Gutter; cột tự co giãn khi đổi kích thước frame. Với các kiểu cố định, nhập Width và Offset.

Một frame nhận được nhiều layout guide cùng lúc, ví dụ Column cộng Row để thành lưới mô đun. Phím Shift G bật tắt hiển thị.

InDesign: Margins and Columns, Create Guides, baseline grid

• Lề và cột: Layout > Margins and Columns, rồi nhập giá trị.
• Lưới đường gióng: Layout > Create Guides, nhập số hàng, số cột ở ô Number, khoảng cách ở ô Gutter, chọn Margins để lưới nằm trong lề hoặc Page để tính từ mép trang.
• Baseline grid: Edit > Preferences > Grids (Windows) hoặc InDesign > Preferences > Grids (macOS); đặt Start, Relative To và Increment Every bằng leading của chữ nội dung. Một khung chữ muốn có lưới riêng thì vào Object > Text Frame Options, thẻ Baseline Options, chọn Use Custom Baseline Grid.

Đây là bộ ba thao tác bạn dùng nhiều nhất khi dàn catalogue, brochure hay booklet nhiều trang.

Illustrator và Photoshop: guide và grid

• Illustrator: bật thước bằng View > Rulers > Show Rulers rồi kéo guide từ thước ra; muốn biến các hình chữ nhật thành cột lưới thì chọn chúng và vào View > Guides > Make Guides. Lưới ô có sẵn nằm ở View > Show Grid, chỉnh khoảng cách ở Preferences (macOS: Settings) > Guides & Grid, ô Gridline every.
• Photoshop: View > Rulers rồi kéo guide từ thước, hoặc View > Guides > New Guide để nhập Orientation và Position chính xác. Lưới ô bật bằng View > Show > Grid.

CSS Grid là gì? Bản rất ngắn cho designer

Theo MDN, CSS grid layout là một hệ thống lưới hai chiều của CSS, dùng để dàn các vùng lớn của trang hoặc các thành phần giao diện nhỏ. Bốn thứ đủ để đọc hiểu mã của lập trình viên:

• display: grid: biến một phần tử thành khung lưới, các phần tử con trực tiếp thành ô lưới.
• grid-template-columns: khai báo các cột, ví dụ repeat(12, 1fr) là 12 cột bằng nhau.
• fr: đơn vị chỉ một phần của khoảng trống còn lại trong khung lưới.
• gap (hoặc column-gap, row-gap): chính là gutter.

Lưới 1440 px trong ví dụ trên vì thế viết thành: display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; padding: 0 64px;

Khi nào nên phá lưới và những lỗi thường gặp

Phá lưới là cố ý cho một yếu tố vượt khỏi cột hoặc lề để tạo điểm nhấn, ví dụ tấm ảnh tràn lề. Nó chỉ có tác dụng khi phần còn lại vẫn bám lưới, và mỗi trang chỉ nên có một điểm phá. Các lỗi hay gặp:

• Đặt chữ hoặc ảnh lấn vào rãnh, khiến các cột dính vào nhau.
• Lề hoặc rãnh mỗi trang, mỗi màn hình một số khác nhau.
• Chọn quá nhiều cột cho khung hẹp, cột nhỏ đến mức không chứa nổi một dòng chữ dễ đọc.
• Dùng lưới desktop cho điện thoại thay vì dựng lại số cột và lề cho từng mốc chiều rộng.

Cùng một trang mẫu trên lưới 12 cột, bật và tắt lưới; phần gạch chéo là điểm phá duy nhất. Hình do ColorME tự dựng.

Checklist trước khi chốt lưới

1. Đã chọn loại lưới theo nội dung: nhiều chữ, nhiều ảnh hay nhiều thành phần giao diện?
2. Lề, số cột, rãnh cộng lại có khớp đúng chiều rộng khung không?
3. Khoảng cách dọc có theo một bước chung (baseline hoặc bội số của 8) không?
4. Mỗi mốc màn hình hoặc mỗi khổ giấy đã có bộ số riêng chưa?

Câu hỏi thường gặp về grid

Grid layout là gì?

Là bố cục dựng trên lưới: nội dung được xếp vào các cột, hàng và ô đã chia sẵn thay vì đặt tự do. Trong lập trình web, cụm này thường chỉ CSS grid layout.

Grid line là gì?

Là đường kẻ của lưới. Trong CSS Grid, MDN giải thích rằng bạn khai báo các dải (track), còn trình duyệt đánh số các đường để đặt phần tử: lưới 3 cột có 4 đường dọc.

Grid và guide khác nhau thế nào?

Theo trang trợ giúp Photoshop, grid là một mẫu đường kẻ cố định phủ cả canvas, còn guide là đường gióng bạn tự đặt đúng vị trí cần. Cả hai đều không in ra.

Vì sao lưới 12 cột phổ biến trên web?

Trang công cụ Tính lưới cột của ColorME ghi: "12 chia hết cho 2, 3, 4 và 6 nên dễ chia bố cục 2, 3, 4 hay 6 phần đều nhau". Bootstrap cũng dùng 12 cột. Còn "hai đến sáu cột" ở phần lưới cột phía trên là thói quen của ấn phẩm in.

Nên đọc gì để hiểu sâu về lưới?

Cuốn kinh điển là "Grid systems in graphic design" của Josef Müller-Brockmann; nhà xuất bản Niggli ghi ngày xuất bản 1981 và gọi đây là sổ tay cho nhà thiết kế đồ họa, người làm chữ và thiết kế triển lãm.

Lời kết

Trên đây là tổng hợp những điều cơ bản về lưới và các thiết kế dạng lưới mà mỗi designer đều nên nắm lấy trước khi bắt tay vào việc thiết kế các sản phẩm. Mong rằng, với những thông tin bổ ích này sẽ giúp các bạn có được cái nhìn tổng quan về hệ thống lưới trong thiết kế cũng như tìm ra thể loại lưới phù hợp trong các thiết kế của riêng mình.

Để thực hành, bạn có thể tính độ rộng cột và lề bằng công cụ Tính lưới cột, hoặc đặt lưới tỉ lệ vàng lên ảnh với công cụ Lưới tỉ lệ vàng của ColorME.