Hy guys how you doing . I was learning a shorthand properties for all the grid properties . I was practicing to use only implicit grid without any explicit grid.
I use the following code but the grid-items I defined don’t use the size I defined
which is auto-flow 200px and auto-flow 300px instead my grid items have a size by default which is auto and as we know the default value for the justify-content and align-content is stretch because of my grid-items have a sizing
“auto” they will stretch to fill the whole grid-container.
why my my implicit grid-items don’t have the size I defined?
how both my implicit rows and columns have the size I defined by using
the “grid” property?
<!--HTML
this are my grid container and my grid items -->
<div class="main-container">
<div class="grid-container">
<div class=" item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class=" item item-4">item-4</div>
<div class=" item item-5">item-5</div>
<div class="item item-6">item-6</div>
</div>
</div>
/* css */
.main-container{
border: 3px solid black;
padding: 7px;
}
.grid-container{
border: 3px solid black;
display: grid;
grid: auto-flow 200px /
auto-flow 300px;
grid-gap: 5px;
height: 500px;
}
.item-2{
grid-column: 1 / 3 ;
}
my items look like this