How to make the items in the last row consume remaining space in CSS Grid?

by

This is totally possible with CSS grid by combining the CSS rules nth-child and nth-last-of-type. The only caveat is that the number of columns needs to be known in advance. 

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: start;
    grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}
<div class="grid">
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
</div>

More Related Contents:

  1. Make a div span two rows in a grid
  2. Prevent content from expanding grid items
  3. Equal height rows in CSS Grid Layout
  4. How can I make a div span multiple rows and columns in a grid?
  5. How is “grid-template-rows: auto auto 1fr auto” interpreted?
  6. Why aren’t my grid-template-areas with ASCII art not working?
  7. Aligning grid items across the entire row/column (like flex items can)
  8. Position deeply nested elements in a higher level grid container
  9. Browser support for CSS Grid
  10. The difference between percentage and fr units
  11. Why are CSS named grid areas not in quotes?
  12. Left aligned last row in centered grid of elements
  13. What is the difference between auto-fill and auto-fit?
  14. A grid layout with responsive squares
  15. Create a Masonry grid with flexbox (or other CSS)
  16. Why percentage value within grid-gap create overflow in CSS grid?
  17. Using CSS transitions in CSS Grid Layout
  18. CSS Grid – Auto height rows, sizing to content
  19. How to make a column span full width when a second column is not there? (CSS Grid)
  20. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  21. Percentage padding / margin on grid item ignored in Firefox
  22. CSS Grid auto fit with max-content
  23. Setting different lengths for grid gaps in CSS Grid
  24. How do you collapse unused row in a CSS grid?
  25. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  26. grid-area does not seem to work with the attr function, is this by design?
  27. How to center content and make the background cover the full column when using CSS Grid?
  28. Bootstrap Grid System new line does not look nice
  29. Getting columns to wrap in CSS Grid
  30. Why doesn’t min-content work with auto-fill or auto-fit?

Leave a Comment