Để điều chỉnh kích thước khoảng cách, hãy sử dụng thuộc tính lưới-cột-khoảng cách, khoảng cách hàng-hàng hoặc khoảng cách lưới trong CSS.
thuộc tính lưới-cột-khoảng cách
Đặt khoảng cách giữa các cột Grid bằng CSS. Bạn có thể thử chạy mã sau để triển khai thuộc tính lưới-cột-khoảng cách.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: green;
grid-template-columns: auto auto;
padding: 20px;
grid-column-gap: 20px;
}
.ele {
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 = "ele">1</div>
<div class = "ele">2</div>
<div class = "ele">3</div>
<div class = "ele">4</div>
<div class = "ele">5</div>
<div class = "ele">6</div>
</div>
</body>
</html> thuộc tính lưới-hàng-khoảng cách
Đặt khoảng cách giữa các hàng Lưới bằng CSS. Bạn có thể thử chạy mã sau để triển khai thuộc tính lưới-hàng-khoảng cách.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: green;
grid-template-columns: auto auto;
padding: 20px;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.ele {
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 = "ele">1</div>
<div class = "ele">2</div>
<div class = "ele">3</div>
<div class = "ele">4</div>
<div class = "ele">5</div>
<div class = "ele">6</div>
</div>
</body>
</html> thuộc tính lưới khoảng cách
Đặt khoảng cách giữa các hàng và cột trong Lưới bằng CSS. Bạn có thể thử chạy mã sau để triển khai thuộc tính lưới khoảng cách.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: green;
grid-template-columns: auto auto;
padding: 20px;
grid-gap: 20px 20px;
}
.ele {
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 = "ele">1</div>
<div class = "ele">2</div>
<div class = "ele">3</div>
<div class = "ele">4</div>
<div class = "ele">5</div>
<div class = "ele">6</div>
</div>
</body>
</html>