Items that span all columns/rows using CSS grid layout

by

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.

More Related Contents:

  1. Grid properties not working on elements inside grid container
  2. Equal width columns in CSS Grid
  3. How to make CSS Grid items take up remaining space?
  4. CSS-only masonry layout
  5. Centering in CSS Grid
  6. Flex / Grid layouts not working on button or fieldset elements
  7. Center and bottom-align flex items
  8. Make grid container fill columns not rows
  9. Make a grid item span to the last row / column in implicit grid
  10. CSS grid square layout [duplicate]
  11. minmax() defaulting to max
  12. Preventing double borders in CSS Grid
  13. Grid areas not laying out properly in CSS Grid
  14. Why is my Grid element’s height not being calculated correctly?
  15. Why display grid with 100% in grid-template-columns goes out of body?
  16. CSS grid – maximum number of columns without media queries
  17. Make row stretch across all columns in CSS Grid
  18. All widths set to width of widest element
  19. Make flex items overlap
  20. How to make images stay within the rows of a css grid container?
  21. Understanding grid negative values
  22. grid-auto-flow in snake lines?
  23. CSS grid wrapping
  24. How can I create a row-based masonry layout using CSS?
  25. Change the column order in a css grid
  26. Why does CSS Grid layout add extra gaps between cells?
  27. How to flatten nested divs to display them in a CSS grid?
  28. How to make a fixed column in CSS using CSS Grid Layout?
  29. pseudo-element acting like a grid item in CSS grid
  30. CSS Grid Row Height Safari Bug

Leave a Comment