5.1 Thuộc tính grid-auto-rows
CSS Grid Layout cung cấp công cụ tuyệt vời cho việc bố trí tự động phần tử trong lưới. Các thuộc tính grid-auto-rows, grid-auto-columns và grid-auto-flow giúp quản lý hành vi của các phần tử không được đặt rõ ràng trong lưới. Hãy xem xét các thuộc tính này chi tiết hơn.
Thuộc tính grid-auto-rows xác định chiều cao của các hàng được thêm tự động khi các phần tử vượt quá giới hạn các hàng đã được định rõ.
Cú pháp:
.grid-container {
grid-auto-rows: value;
}
Ở đâu:
-
value: chiều cao của các hàng được thêm tự động. Có thể được chỉ định bằng các đơn vị khác nhau (px,%,fr,auto, v.v.)
Ví dụ 1: Chiều cao hàng cố định
Trong ví dụ này, tất cả các hàng được thêm tự động sẽ có chiều cao cố định là 100px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Ba cột có cùng độ rộng */
grid-auto-rows: 100px; /* Các hàng được thêm tự động sẽ có chiều cao 100px */
}
Ví dụ 2: Chiều cao hàng linh hoạt
Trong ví dụ này, các hàng được thêm tự động sẽ có chiều cao tối thiểu là 100px, nhưng có thể tăng lên khi cần thiết:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto); /* Chiều cao tối thiểu của hàng là 100px, có thể tự động tăng */
}
5.2 Thuộc tính grid-auto-columns
Thuộc tính grid-auto-columns xác định độ rộng của các cột được thêm tự động khi các phần tử vượt quá giới hạn của các cột đã được định rõ.
Cú pháp:
.grid-container {
grid-auto-columns: value;
}
Ở đâu:
-
value: độ rộng của các cột được thêm tự động. Có thể được chỉ định bằng các đơn vị khác nhau (px,%,fr,auto, v.v.)
Ví dụ 1: Độ rộng cột cố định
Trong ví dụ này, tất cả các cột được thêm tự động sẽ có độ rộng cố định là 100px:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px); /* Ba hàng có cùng chiều cao */
grid-auto-columns: 100px; /* Các cột được thêm tự động sẽ có độ rộng 100px */
}
Ví dụ 2: Độ rộng cột linh hoạt
Trong ví dụ này, các cột được thêm tự động sẽ có độ rộng tối thiểu là 100px, nhưng có thể tăng lên tới một phần không gian trống:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-auto-columns: minmax(100px, 1fr); /* Độ rộng tối thiểu của cột là 100px, có thể tăng lên tới một phần không gian trống */
}
5.3 Thuộc tính grid-auto-flow
Thuộc tính grid-auto-flow xác định cách tự động bố trí các phần tử trong lưới, những phần tử không được xác định rõ ràng bằng các thuộc tính grid-row và grid-column.
Cú pháp:
.grid-container {
grid-auto-flow: value;
}
Ở đâu:
value: giá trị xác định thứ tự bố trí phần tử. Các giá trị có thể có:
row(mặc định): các phần tử được bố trí theo hàngcolumn: các phần tử được bố trí theo cộtdense: các phần tử được bố trí chặt chẽ, không có ô trống (sử dụng cùng vớirowhoặccolumn)
Ví dụ 1: Bố trí theo hàng
Trong ví dụ này, các phần tử sẽ được bố trí theo hàng, lấp đầy từng hàng một:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row; /* Các phần tử được bố trí theo hàng */
}
Ví dụ 2: Bố trí theo cột
Trong ví dụ này, các phần tử sẽ được bố trí theo cột, lấp đầy từng cột một:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column; /* Các phần tử được bố trí theo cột */
}
Ví dụ 3: Bố trí chặt chẽ
Trong ví dụ này, các phần tử sẽ được bố trí theo hàng với bố trí chặt chẽ, giúp giảm thiểu số ô trống:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense; /* Các phần tử được bố trí theo hàng với bố trí chặt chẽ */
}
5.4 Ví dụ thực hiện đầy đủ
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Ba cột có cùng độ rộng */
grid-auto-rows: 100px; /* Các hàng được thêm tự động sẽ có chiều cao 100px */
grid-auto-flow: row dense; /* Các phần tử được bố trí theo hàng với bố trí chặt chẽ */
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ về bố trí tự động phần tử trong CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Phần tử 1</div>
<div class="grid-item">Phần tử 2</div>
<div class="grid-item">Phần tử 3</div>
<div class="grid-item">Phần tử 4</div>
<div class="grid-item">Phần tử 5</div>
<div class="grid-item">Phần tử 6</div>
</div>
</body>
</html>
Giải thích mã:
-
.grid-container: tạo container Grid với ba cột có cùng độ rộng và các hàng tự động có chiều cao100px. Các phần tử được bố trí theo hàng với bố trí chặt chẽ -
.grid-item: xác định các phong cách cơ bản cho phần tử lưới, như màu nền, màu chữ, khoảng cách lề, căn giữa văn bản và viền
GO TO FULL VERSION