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

问题

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  grid-auto-rows: 60px;
  grid-gap: 15px;
}

.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>

This creates 2 rows, first is 100px height, second is auto-created with 60px height. 2 columns in the second row have 1fr width.

Is this possible via CSS Grid/Flexbox to horizontally center 2 columns in the 2nd row? I.e. have a varying number of columns per row.

I am stuck trying to solve a trivial usecase for the CSS Grid framework in the browser. This is pretty nonproblematic to achieve if you build your grids with Flexbox.

But can I achieve it with CSS Grid?

Here is a CodePen demo of what I am trying to achieve.

回答1:

If your rows have varying numbers of cells that aren't all laid out on a single two-dimensional (row and column) space, you don't have a grid. A grid by definition contains a fixed number of rows and columns, and cells that span one or more of each. Maybe you'd have multiple heterogeneous grids, one per row, but that just defeats the whole point of grids, really.

If your varying number of rows is symmetrical or follows some kind of pattern, you can follow Michael_B's suggestion of building a grid based on a common denominator and populating the grid areas mosaic-style. This is just about as non-trivial as a flexbox solution currently would be, but once more browsers implement flexbox fragmentation, flexbox should become the obvious choice over grid as it ought to be.

回答2:

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:

回答3:

You could always try it this way:

CSS

body {
    margin: 2% 35%;
}
.container {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: [col] 100px [col] 100px [col] 100px [col] 100px  ;
    grid-template-rows: [row] auto [row] auto [row] ;
    background-color: #fff;
    color: #444;
}
.col {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;

}
.a {
    grid-column: col / span 2;
    grid-row: row ;
}
.b {
    grid-column: col 3 / span 2 ;
    grid-row: row ;
}
.c {
    grid-column: col ;
    grid-row: row 2 ;
}
.d {
    grid-column: col 2 / span 3 ;
    grid-row: row 2 ;
}
.e {
    grid-column: col / span 4;
    grid-row: row 3;
}

HTML

<div class="container">
    <div class="col a">A</div>
    <div class="col b">B</div>
    <div class="col c">C</div>
    <div class="col d">D</div>
    <div class="col e">E</div>
</div>

CodePen: https://codepen.io/anon/pen/MOLrvq

回答4:

You can solve this with having nested grids. Grid-1 (covers complete area) Grid-2 (covers row-1) Grid-3 (covers row-2)

By having this setting you can shorten the width of row-2.

回答5:

If anyone is going through this same trouble, this is the way I figured it out. I had two divs inside a container and in wanted them to have different columns. So i just made for each div a grid. And i put 1fr row, and then the number of columns i wanted. It worked like a charm.

来源：https://stackoverflow.com/questions/47614008/can-i-have-a-varying-number-of-columns-per-row-in-a-css-grid

标签

css

css3

css-grid