repeat(/*Number of repeats*/, /*Code to be repeated*/)
.gridContainer {
grid-template-columns: repeat(4, 100px); /*Creates 4 columns, each 100px in width*/
grid-template-rows: repeat(2, 250px); /*Creates 2 rows, each 250px in height*/
}.container {
display: grid;
grid-template-columns: 6fr 6fr;
grid-column-gap: 20px
grid-row-gap: 20px
justify-items: stretch
align-items: stretch
}/* giving container class grid will not work we have to give rows and columns
1fr means taking 1 part of available space.*/
.container{
display:grid;
grid-template-rows: 150px 150px;
grid-template-columns:1fr 1fr 1fr ; /* container contain 6 items inside it*/
/* in short we can also use repeat function */
grid-template-columns:repeat(3 ,1fr);
grid-template-columns:50% repeat(2,1fr); /*it means first column will take 50% and other 2 50% */
}<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
.grid-container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: auto auto auto;
place-items: center;
}
.grid-item {
background-color: silver;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}grid
cssgrid