2.1 Thuộc tính display: grid
CSS Grid Layout là hệ thống bố cục mạnh mẽ cho phép tạo ra bố cục trang web phức tạp bằng cách sử dụng hàng và cột. Bước cơ bản khi làm việc với CSS Grid là tạo container Grid. Dưới đây, mình sẽ trình bày cách sử dụng thuộc tính display: grid để tạo container Grid và quản lý các khía cạnh cơ bản của nó.
Khái niệm cơ bản về tạo container Grid
Thuộc tính display: grid
Thuộc tính display: grid xác định một phần tử là container Grid. Đây là bước cơ bản để sử dụng tất cả các khả năng của CSS Grid trong việc bố cục các phần tử.
Ví dụ:
.grid-container {
display: grid;
}
Các phần tử cơ bản của container Grid
Sau khi xác định container Grid với thuộc tính display: grid, tất cả các phần tử con của container đó tự động trở thành grid-element. Điều này cho phép quản lý vị trí và căn chỉnh của chúng trong container.
Ví dụ:
.grid-container {
display: grid;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!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ề container 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>
</body>
</html>
Giải thích mã:
.grid-container: xác định một phần tử là container Grid với thuộc tínhdisplay: grid. Cũng thêm đường viền để làm nổi bật container.grid-item: xác định các kiểu cơ bản cho các phần tử bên trong container Grid, chẳng hạn như màu nền, màu chữ, padding, viền và căn giữa văn bản
2.2 Container Grid lồng nhau
Một trong những lợi thế của CSS Grid là khả năng tạo container Grid lồng nhau. Điều này cho phép tạo ra các bố cục phức tạp, nơi một grid-element có thể trở thành grid-container cho các phần tử con của nó.
Ví dụ:
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.nested-grid-container {
display: grid;
gap: 5px;
background-color: #2980b9;
padding: 10px;
}
.nested-grid-item {
background-color: #1abc9c;
padding: 10px;
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>Container Grid lồng nhau</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">
<div class="nested-grid-container">
<div class="nested-grid-item">Phần tử lồng 1</div>
<div class="nested-grid-item">Phần tử lồng 2</div>
</div>
</div>
<div class="grid-item">Phần tử 3</div>
</div>
</body>
</html>
Giải thích mã:
-
.nested-grid-container: xác định container Grid lồng với thuộc tínhdisplay: grid, đồng thời thêm khoảng cách giữa các phần tử (gap: 5px) và padding bên trong (padding: 10px) -
.nested-grid-item: xác định các kiểu cơ bản cho các phần tử bên trong container Grid lồng, chẳng hạn như màu nền, padding và viền
2.3 Quản lý hành vi của container Grid
Thuộc tính display: grid cũng cho phép sử dụng các thuộc tính bổ sung để quản lý hành vi của container Grid. Ví dụ, thuộc tính grid-auto-flow quản lý vị trí tự động của các phần tử.
Ví dụ:
.grid-container {
display: grid;
grid-auto-flow: row;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Container Grid với auto-flow</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>
</body>
</html>
2.4 Sử dụng Flexbox bên trong container Grid
Trong một số trường hợp, sử dụng Flexbox bên trong grid-element có thể hữu ích để tạo ra các bố cục phức tạp hơn. Điều này cho phép kết hợp lợi ích của cả hai công nghệ.
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.flex-container {
display: flex;
gap: 10px;
}
.flex-item {
background-color: #1abc9c;
padding: 10px;
flex: 1;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox bên trong container Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item flex-container">
<div class="flex-item">Flex phần tử 1</div>
<div class="flex-item">Flex phần tử 2</div>
</div>
<div class="grid-item">Phần tử 2</div>
<div class="grid-item">Phần tử 3</div>
</div>
</body>
</html>
Giải thích mã:
.flex-container: xác định grid-element như một flex-container với thuộc tínhdisplay: flex.flex-item: xác định các kiểu cơ bản cho các phần tử bên trong flex-container, chẳng hạn như màu nền, padding và độ linh hoạt (flex: 1)
GO TO FULL VERSION