Tagged: grid

  • Posted on

    Today I learned, grid-auto-columns and grid-auto-rows size implicit tracks as well as any explicit tracks that are not explicitly sized by by grid-template-rows or grid-template-columns.

    Until now, I was under the impression that grid-auto-rows and grid-auto-columns size only implicit grid tracks.

  • Posted on

    Why is `grid-row: 1/-1` not working?

    The grid-row grid-placement property is shorthand for grid-row-start and grid-row-end.

    .grid-item {
      grid-row: 1/-1;
      /* is equivalent to */
      grid-row-start: 1;
      grid-row-end: -1;
    }

    In the above declaration, we use integers to position and size the grid item by line numbers.

    As per the spec:

    Numeric indexes in the grid-placement properties count from the edges of the explicit grid. Positive indexes count from the start side (starting from 1 for the start-most explicit line), while negative indexes count from the end side (starting from -1 for the end-most explicit line).

    The important bit is the explicit grid. This begs the question …

    What is the explicit grid?

    As per the spec:

    The three properties grid-template-rows, grid-template-columns, and grid-template-areas together define the explicit grid of a grid container by specifying its explicit grid tracks.

    Simply put, the explicit grid consists of manually defined rows and columns.

    The size of the explicit grid is determined by the larger of the number of rows/columns defined by grid-template-areas and the number of rows/columns sized by grid-template-rows/grid-template-columns. Any rows/columns defined by grid-template-areas but not sized by grid-template-rows/grid-template-columns take their size from the grid-auto-rows/grid-auto-columns properties. If these properties don’t define any explicit tracks the explicit grid still contains one grid line in each axis.

    That last bit is what leads to line -1 being the same line as 1 because the explicit grid still contains one grid line in each axis.

    What is the implicit grid?

    As Manuel Matuzovic puts it:

    If there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid, the grid container automatically generates grid tracks by adding grid lines to the grid. The explicit grid together with these additional implicit tracks and lines forms the so called implicit grid.

    Conclusion

    Paraphrasing Jen Simmons:

    • -1 is the last line of the explicit grid
    • If you haven’t defined any explicit rows, then all your rows are implicit
    • For implicit rows, -1 is the same line as 1
    • Define explicit rows and grid-row: 1/-1 will work as expected

    Further Reading