Mô-đun布局 lưới CSS

Header
Menu
Main
Right
Footer

Thử nghiệm trực tiếp

Bố cục lưới

Module Bố cục lưới CSS (CSS Grid Layout Module) cung cấp hệ thống bố cục dựa trên lưới với hàng và cột, giúp thiết kế trang web dễ dàng hơn mà không cần sử dụng nổi và định vị.

Hỗ trợ trình duyệt

Tất cả các trình duyệt hiện đại đều hỗ trợ thuộc tính lưới.

57.0 16.0 52.0 10 44

Các phần tử lưới

Bố cục lưới được tạo thành từ một phần tử cha và một hoặc nhiều phần tử con.

Mô hình

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9

Thử nghiệm trực tiếp

Thuộc tính hiển thị

Khi thuộc tính Display của phần tử HTML display Thuộc tính được đặt thành grid hoặc inline-grid thì nó sẽ trở thành khung lưới.

Mô hình

.grid-container {
  display: grid;
}

Thử nghiệm trực tiếp

Mô hình

.grid-container {
  display: inline-grid;
}

Thử nghiệm trực tiếp

Tất cả các phần tử con trực tiếp của khung lưới sẽ trở thành các phần tử lưới tự động.

Cột lưới (Grid Columns)

Cột của các phần tử lưới được gọi là cột.

Hàng lưới (Grid Rows)

Dòng của các phần tử lưới được gọi là hàng.

Khoảng cách lưới (Grid Gaps)

Khoảng cách giữa mỗi cột/hàng được gọi là khoảng cách.

Bạn có thể điều chỉnh kích thước khoảng cách bằng cách sử dụng một trong các thuộc tính sau:

  • grid-column-gap
  • grid-row-gap
  • grid-gap

Mô hình

grid-column-gap Thuộc tính này thiết lập khoảng cách giữa các cột:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

Thử nghiệm trực tiếp

Mô hình

grid-row-gap Thuộc tính này thiết lập khoảng cách giữa các hàng:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

Thử nghiệm trực tiếp

Mô hình

grid-gap Thuộc tính là viết tắt của thuộc tính grid-row-gap và grid-column-gap:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

Thử nghiệm trực tiếp

Mô hình

grid-gap Thuộc tính có thể được sử dụng để đặt khoảng cách giữa hàng và cột thành một giá trị:

.grid-container {
  display: grid;
  grid-gap: 50px;
}

Thử nghiệm trực tiếp

Dòng lưới (Grid Lines)

Cột giữa được gọi là cột (column lines).

Dòng giữa được gọi là dòng (row lines).

Khi đặt mục tiêu lưới trong hộp chứa lưới, hãy tham chiếu đến số dòng:

Mô hình

Đặt mục tiêu lưới vào cột 1 và kết thúc tại cột 3:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Thử nghiệm trực tiếp

Mô hình

Đặt mục tiêu lưới vào dòng 1 và kết thúc tại dòng 3:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Thử nghiệm trực tiếp