Thiết bị chứa CSS lưới

1
2
3
4
5
6
7
8

Thử trực tiếp

Hộp lưới

Để làm cho phần tử HTML hoạt động như hộp lưới, bạn phải đặt display Thuộc tính được đặt thành grid hoặc inline-grid.

Hộp lưới được组成放置在列和行内的网格项目。

Thuộc tính grid-template-columns

grid-template-columns Thuộc tính xác định số lượng cột trong bố cục lưới, và có thể xác định chiều rộng của mỗi cột.

Giá trị của nó là danh sách phân cách bằng khoảng trống, trong đó mỗi giá trị xác định chiều dài của cột tương ứng:

Nếu bạn muốn bố cục lưới chứa bốn cột, hãy chỉ định chiều rộng của bốn cột này; nếu tất cả các cột đều nên có cùng chiều rộng, hãy đặt thành "auto".

Ví dụ

Tạo lưới chứa bốn cột:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Thử trực tiếp

Lưu ý:Nếu trong lưới 4 cột có hơn 4 mục, lưới sẽ tự động thêm hàng mới và đặt các mục này vào đó.

grid-template-columns Thuộc tính này còn có thể được sử dụng để chỉ định kích thước của cột (chiều rộng).

Ví dụ

Đặt kích thước cho 4 cột này:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

Thử trực tiếp

Thuộc tính grid-template-rows

grid-template-rows Thuộc tính xác định chiều cao của cột.

1
2
3
4
5
6
7
8

Giá trị của nó là danh sách phân cách bằng khoảng trống, trong đó mỗi giá trị xác định chiều cao của hàng tương ứng:

Ví dụ

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

Thử trực tiếp

Thuộc tính justify-content

justify-content Thuộc tính này được sử dụng để canh lưới trong hộp.

1
2
3
4
5
6
7
8

Lưu ý:Chiều rộng của lưới phải nhỏ hơn chiều rộng của hộp, để thuộc tính justify-content hoạt động.

Ví dụ

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

Thử trực tiếp

Ví dụ

.grid-container {
  display: grid;
  justify-content: space-around;
}

Thử trực tiếp

Ví dụ

.grid-container {
  display: grid;
  justify-content: space-between;
}

Thử trực tiếp

Ví dụ

.grid-container {
  display: grid;
  justify-content: center;
}

Thử trực tiếp

Ví dụ

.grid-container {
  display: grid;
  justify-content: start;
}

Thử trực tiếp

Ví dụ

.grid-container {
  display: grid;
  justify-content: end;
}

Thử trực tiếp

Thuộc tính align-content

align-content Thuộc tính được sử dụng để làm thẳng toàn bộ lưới trong容器.

1
2
3
4
5
6
7
8

Lưu ý:Tổng chiều cao của lưới phải nhỏ hơn chiều cao của容器的, để thuộc tính align-content hoạt động.

Ví dụ

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

Thử trực tiếp

Ví dụ

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

Thử trực tiếp

Ví dụ

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

Thử trực tiếp

Ví dụ

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

Thử trực tiếp

Ví dụ

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

Thử trực tiếp

Ví dụ

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

Thử trực tiếp