I have searched a lot of places but haven't found the answer.
The doubt is how can we declare both the implicit and the explicit properties in the grid shorthand. Like this:
grid: 30% min-content 5% auto-flow 20vh / repeat(6, 1fr);
I want to convert the following properties in the shorthand:
.container{
grid-template-rows: 30% min-content 5%;
grid-template-columns: repeat(6, 1fr);
grid-auto-flow: row;
grid-auto-rows:
20vh;
}
So, can we declare both types of values at once?
And if you are going to say, use the repeat() function in it, then I can't because the container is scrollable so auto-fit or auto-fill breaks the layout and without them how could I repeat it for any number of times required?
You cannot do this. You can either define the explicit or the implicit configuration for each axis. So either you define "implicit row"/"explicit column" or "explicit row"/"implicit column" but you cannot have "explicit row"/"implicit row"/"explicit column"
You can check the specification for the full syntax:
Sets up auto-flow, by setting the tracks in one axis explicitly (setting either
grid-template-rows
orgrid-template-columns
as specified, and setting the other to none), and specifying how to auto-repeat the tracks in the other axis (setting eithergrid-auto-rows
orgrid-auto-columns
as specified, and setting the other to auto). grid-auto-flow is also set to either row or column accordingly, with dense if it’s specified.
As you can read, you cannot have grid-template-rows
and grid-auto-rows
together
The best you can do is:
.container {
grid: auto-flow 20vh / repeat(6, 1fr);
grid-template-rows: 30% min-content 5%;
}
<div class="container"></div>
In that same specification you can also read:
Note that you can only specify the explicit or the implicit grid properties in a single grid declaration.
The above apply to each axis.