Grid Container trong CSS có các mục lưới. Các mục này được đặt bên trong các hàng và cột. Hãy để chúng tôi tạo một
Vùng chứa CSS Grid và đặt số lượng cột trong Grid:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: blue;
grid-template-columns: auto auto;
padding: 20px;
grid-gap: 20px;
}
.container > div {
background-color: orange;
border: 2px solid gray;
padding: 35px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Game Board</h1>
<div class = "container">
<div class = "ele1">1</div>
<div class = "ele2">2</div>
<div class = "ele3">3</div>
<div class = "ele4">4</div>
<div class = "ele5">5</div>
<div class = "ele6">6</div>
</div>
</body>
</html>