Items that span all columns/rows using CSS grid layout

html css grid css-grid
Marlius picture Marlius · Feb 15, 2017 · Viewed 25.7k times · Source

With the CSS Grid Layout Module soon shipping in Firefox and Chrome, I thought that I'd try to get a handle of how to use it.

I've tried to create a simple grid with one item a spanning the left side of all of the rows, with the other items (b, c, d, e, etc.) spanning the right side of individual rows. The amount of items spanning the right side of the rows is variable, so there might be any combination of b, c, d, e, etc., so I'm using the grid-auto-rows property. As such, I cannot define a fixed number of rows for a to span, but I would like a to span all available rows.

What should I do to make a span all rows without knowing how many rows there will end up being?

Answer

lehoang picture lehoang · May 30, 2018

I had the same situation and found a clean solution.

Instead of using a huge row span value, try:

    grid-column: 1/-1;

As negative number counts from the right, this code specifies the grid-column to the end of the last column.

Note: In case this doesn't apply, check Jonny Green's solution in the below comment.

Related questions

Equal width columns in CSS Grid

I'd like to have the html below showing in n equal columns whether there are two, or three, or more child elements to the row element using css grid - Flexbox makes this easy but I cannot get it done …

Read More
How to make CSS Grid items take up remaining space?

I have a card built with CSS Grid layout. There might be an image to the left, some text to the right top and maybe a button or a link at the right bottom. In the code below, how can …

Read More
Nested rows with bootstrap grid system?

I want 1 larger image with 4 smaller images in a 2x2 format like this: My initial thought was to house everything in one row. Then create two columns, and, in the second column, create two rows and two columns to create …

Read More