ग्रिड-टेम्पलेट-कॉलम का उपयोग करें CSS ग्रिड लेआउट में कॉलम की संख्या को परिभाषित करने के लिए संपत्ति।
आप कई कॉलम सेट करने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं। यहां, 3 कॉलम ग्रिड सेट है:
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: yellow;
grid-template-columns: auto auto auto;
padding: 20px;
grid-gap: 20px;
}
.container > div {
background-color: blue;
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>