Search code examples
htmlcsslayoutcss-grid

Can we declare both implicit and explicit properties for columns in the "grid" shorthand?


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?


Solution

  • 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 or grid-template-columns as specified, and setting the other to none), and specifying how to auto-repeat the tracks in the other axis (setting either grid-auto-rows or grid-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.