Hệ thống lưới (Grid System) trong Layui cung cấp cơ chế bố cục phản ứng đa thiết bị dựa trên mô hình 12 cột. Việc triển khai chỉ yêu cầu các lớp CSS được định nghĩa sẵn, không cần viết thêm CSS tùy chỉnh.

Cấu trúc cơ bản

• Dùng <div class="layui-row"> để tạo một hàng.
• Mỗi cột được khai báo bằng lớp có dạng layui-col-{breakpoint}-{span}, ví dụ layui-col-md-8.
• Các điểm ngắt (breakpoint) hỗ trợ: xs (dưới 768px), sm (≥768px), md (≥992px), lg (≥1200px).
• Giá trị {span} nằm trong khoảng 1–12, biểu thị tỷ lệ chiếm chiều rộng hàng (tổng phải ≤12 để nằm trên cùng một hàng).

Ví dụ bố cục đa nền tảng

<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      Thiết bị nhỏ: 50% | Máy tính bảng: 50% | Máy tính: 33.3%
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      Thiết bị nhỏ: 50% | Máy tính bảng: 50% | Máy tính: 33.3%
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
      Thiết bị nhỏ: 33.3% | Máy tính bảng: 100% | Máy tính: 33.3%
    </div>
  </div>
</div>

Container và độ rộng

Để kiểm soát chiều rộng trên màn hình lớn hơn điện thoại, bao bọc lưới trong layui-container. Nếu muốn mở rộng toàn bộ chiều rộng, dùng layui-fluid:

<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-lg6">Cột trái</div>
    <div class="layui-col-lg6">Cột phải</div>
  </div>
</div>

Khoảng cách và dịch chuyển cột

Thêm khoảng cách giữa các cột bằng lớp layui-col-space{N} (ví dụ: layui-col-space10). Dịch chuyển cột sang phải bằng layui-col-{bp}-offset{N}:

<div class="layui-row">
  <div class="layui-col-md3">Cột 1</div>
  <div class="layui-col-md3 layui-col-md-offset6">Cột 2 — dịch phải 6 cột</div>
</div>

Lồng ghép lưới

Có thể lồng lưới vô hạn cấp bằng cách đặt layui-row bên trong một cột:

<div class="layui-row">
  <div class="layui-col-md8">
    <div class="layui-row">
      <div class="layui-col-md6">Cột con 1</div>
      <div class="layui-col-md6">Cột con 2</div>
    </div>
  </div>
  <div class="layui-col-md4">Cột độc lập</div>
</div>

Hỗ trợ trình duyệt cũ

Đối với IE8/IE9 — vốn không hỗ trợ media queries — cần tích hợp hai thư viện sau vào phần đầu trang:

<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Nút điều khiển (Button)

Áp dụng lớp layui-btn lên bất kỳ thẻ nào để tạo nút. Các biến thể phổ biến:

• layui-btn-primary — nút viền mờ
• layui-btn-normal — nút xanh dương mặc định
• layui-btn-warm — nút cam
• layui-btn-danger — nút đỏ cảnh báo
• layui-btn-lg / layui-btn-sm / layui-btn-xs — kích thước
• layui-btn-radius — bo góc

Nhóm nút và nút chứa

Dùng layui-btn-group để nhóm nút liền kề. Khi số lượng nhiều, nên dùng layui-btn-container để đảm bảo giãn cách đồng đều:

<div class="layui-btn-container">
  <button class="layui-btn layui-btn-sm">Lưu</button>
  <button class="layui-btn layui-btn-sm layui-btn-warm">Xem trước</button>
  <button class="layui-btn layui-btn-sm layui-btn-danger">Hủy</button>
</div>

Biểu tượng trong nút

Chèn biểu tượng từ thư viện layui-icon bên trong nút:

<button class="layui-btn layui-btn-xs">
  <i class="layui-icon"></i> Lưu
</button>

Form và các thành phần nhập liệu

Một form chuẩn cần bao quanh bởi layui-form. Mỗi trường dữ liệu nên tuân theo cấu trúc:

<div class="layui-form-item">
  <label class="layui-form-label">Tên người dùng</label>
  <div class="layui-input-block">
    <input type="text" name="username" required lay-verify="required" class="layui-input">
  </div>
</div>

Các thành phần đặc biệt

• Dropdown: Dùng thẻ <select>; thêm thuộc tính lay-search để bật chức năng tìm kiếm.
• Checkbox/Radio: Thêm thuộc tính lay-skin="primary" để hiển thị kiểu nguyên bản; dùng pane trong layui-form-pane để căn chỉnh bố cục.
• Form phong cách khung: Thêm layui-form-pane vào thẻ form cha.