Implicit.. more items than grid cells

HTML & CSS
1

please see

implicit

means added to the code by the browser?

are cells 10 and cells 11 implicit?

my resource says

the new elements were positioned by the browser in an implicit track, because there are more items than grid cells

having trouble here :frowning:

kindly explain in a simple and clear way for me what this means

thanks!

2

You define a grid with 3 columns and 3 rows. Such a grid would accommodate 9 “boxes” (3 x 3 = 9)
But you then give the grid container 11 boxes to deal with.
The browser adds another row to accommodate these extra boxes. The colunms are defined, but the 4th row heigth isn’t.

1 Like
3

Why would you declare 3 rows only and then go and add 4 rows?

You only need to set the rows when you have a fixed number of rows that you know won’t change.

For an unknown number of rows just use auto which will be the default so just define the columns.

You certainly won’t use 60px height for the rows anyway unless they were empty boxes. If you wanted a minimum height then just set that for item.

.item{min-height:60px;}

4

the 4th row iwas implicitly created

there was more items than grid cells

thats how i see it

please provide me with an example or 2

thank you

5

Here you go :slight_smile:



.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
   /* grid-template-rows: 60px 60px 60px;*/
    grid-gap: 20px;
    
}