.container {
display: grid;
grid-template-columns: 6fr 6fr;
grid-column-gap: 20px
grid-row-gap: 20px
justify-items: stretch
align-items: stretch
}<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;
}display: grid;
display: inline-grid; for applying inline property on grid
grid-template-rows:
grid-template-columns:
grid-auto-flow: dense;
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
justify content
align itemstry: https://cssgrid-generator.netlify.app/.container {
/* standard */
column-gap: <line-size>;
row-gap: <line-size>;
/* old */
grid-column-gap: <line-size>;
grid-row-gap: <line-size>;
}.grid-container {
display: grid;
display: inline-grid;
display: subgrid;