What is the problem in the implicit grid items I defined

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

grid: auto-flow 200px / auto-flow 300px;

Is an invalid property value, use the dev tools and inspect the styles.

invalid-prop-value

It is equivalent to:

grid-auto-flow: row;
grid-auto-rows: 200px;
grid-auto-flow: column;
grid-auto-columns: 300px;

Which would “work” (not invalid) because grid-auto-flow: row would just get overwritten by grid-auto-flow: column. But I’m not really sure I understand what it is you are trying to do here.

1 Like