Can I have a varying number of columns per row in a CSS grid?

by

You’re asking this:

Can I have a varying number of columns per row in a CSS Grid?

But then you’re saying this:

Is this possible via CSS Grid/Flexbox to horizontally center 2 columns in the 2nd row?

It looks like you’re stuck in a classic XY Problem: You’re focusing on your attempted solution rather than your actual problem.

Yes, it is possible to center columns (and grid items, and content) in CSS Grid. (See various methods here: Centering in CSS Grid)

No, it’s not possible to have a varying number of columns per row in a CSS Grid, or any grid for that matter. Otherwise, you don’t have a grid.

Since appearance is often all that matters in a layout, you can build something that looks like three “columns” in the first row and two “columns” in the second row – centered – using CSS Grid.

In my example below, I’ve divided the horizontal space in the grid container among 12 columns. I’ve then used Grid’s line-based placement features to position and size the items.

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 40px;
  grid-gap: 10px;
}

.col:nth-child(-1n + 3) {
  grid-column: span 4;
}
.col:nth-last-child(2) {
  grid-row-start: 2;
  grid-column: 3 / span 4;
}
.col:nth-last-child(1) {
  grid-row-start: 2;
  grid-column: 7 / span 4;
}
.col {
  background-color: tomato;
}
<div class="grid">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

codepen demo

Here’s what it looks like using Firefox DevTools:

enter image description here

More Related Contents:

  1. Make a div span two rows in a grid
  2. Prevent content from expanding grid items
  3. Why aren’t my grid-template-areas with ASCII art not working?
  4. Aligning grid items across the entire row/column (like flex items can)
  5. Position deeply nested elements in a higher level grid container
  6. Align child elements of different blocks
  7. Browser support for CSS Grid
  8. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  9. Why are CSS named grid areas not in quotes?
  10. What is the difference between auto-fill and auto-fit?
  11. What is difference between justify-self, justify-items and justify-content in CSS grid?
  12. How to make the items in the last row consume remaining space in CSS Grid?
  13. A grid layout with responsive squares
  14. Create a Masonry grid with flexbox (or other CSS)
  15. Why percentage value within grid-gap create overflow in CSS grid?
  16. Using CSS transitions in CSS Grid Layout
  17. CSS Grid – Auto height rows, sizing to content
  18. How to make a column span full width when a second column is not there? (CSS Grid)
  19. Is there a “subgrid” feature, to position “grandchildren” of a grid container?
  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. Setting different lengths for grid gaps in CSS Grid
  23. How do you collapse unused row in a CSS grid?
  24. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  25. Is a button allowed to have display:grid? [duplicate]
  26. grid-area does not seem to work with the attr function, is this by design?
  27. minmax fails (invalid property value)
  28. How to center content and make the background cover the full column when using CSS Grid?
  29. Getting columns to wrap in CSS Grid
  30. Why doesn’t min-content work with auto-fill or auto-fit?

Leave a Comment