Để đặt thuộc tính mẫu lưới, bạn cần chỉ định số hàng và cột. Cùng với đó, cũng thiết lập các khu vực trong bố cục lưới. Cú pháp cho mẫu lưới phản ánh giống nhau -
grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ cho mẫu lưới -
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template: 100px / auto auto auto;
grid-gap: 5px;
background-color: blue;
padding: 5px;
}
.grid-container > div {
background-color: orange;
text-align: center;
padding: 5px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Set some random numbers</p>
<div class="grid-container">
<div class="item1">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
<div class="item8">723</div>
<div class="item9">811</div>
</div>
</body>
</html> Đầu ra
