Grid - Cách chia cột nội dung trong một bài viết theo hệ thống grid

Grid hay lưới, là hệ thống chia cột trong website dùng class CSS. Giúp người quản trị dễ dàng tạo những nội dung được chia cột tương thích với nhiều trình duyệt website và thiết bị khác nhau.
Trong website ATStotal đã tích hợp sẵn tính năng này. Cách sử dụng như sau:

Grid chia theo tỷ lệ % làm 12 phần. Yêu cầu mỗi hàng có tối đa tổng cột =12 (số màu đỏ) là OK

Chia 3 cột đều nhau:

<div class="grid-container">
<div class="grid12-4">Nội dung trong cột 1...</div>
<div class="grid12-4">Nội dung trong cột 2...</div>
<div class="grid12-4">Nội dung trong cột 3...</div>
</div>

Chia 3 cột không đều nhau:

<div class="grid-container">
<div class="grid12-3">Nội dung trong cột 1...</div>
<div class="grid12-7">Nội dung trong cột 2...</div>
<div class="grid12-2">Nội dung trong cột 3...</div>
</div>

Chia 4 cột đều nhau:

<div class="grid-container">
<div class="grid12-3">Nội dung trong cột 1...</div>
<div class="grid12-3">Nội dung trong cột 2...</div>
<div class="grid12-3">Nội dung trong cột 3...</div>
<div class="grid12-3">Nội dung trong cột 4...</div>
</div>

Chia nhiều hàng và có khoản trắng giữa 2 hàng:

<div class="grid-container-spaced">
<div class="grid12-6">Nội dung trong cột 1..</div>
<div class="grid12-6">Nội dung trong cột 1..</div>
<div class="grid12-4">Nội dung trong cột 1..</div>
<div class="grid12-4">Nội dung trong cột 1..</div>
<div class="grid12-4">Nội dung trong cột 1..</div>
</div>

Tăng độ rông cột 2 lần nếu duyệt web bằng Mobile:

<div class="grid-container-spaced">
<div class="grid12-3 mobile-grid">Nội dung trong cột 1..</div>
<div class="grid12-3 mobile-grid">Nội dung trong cột 1..</div>
<div class="grid12-3 mobile-grid">Nội dung trong cột 1..</div>
<div class="grid12-3 mobile-grid">Nội dung trong cột 1..</div>
</div>