By HastingsDirect


2018-05-08 12:51:34 8 Comments

With a flex container and flex-wrap: wrap set you can align overflowing items to the center using justify-content: center.

Is there a way to achieve the same behaviour for overflowing grid items using CSS grid?

I've created a pen showing the desired flex behavior

.container-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.container-flex .item {
  width: 33.33%;
  background: green;
  border: 1px solid;
}

.container-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container-grid .item {
  background: red;
  border: 1px solid;
}

* {
  box-sizing: border-box;
}
<h3>Flex</h3>
<div class="container-flex">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

<h3>Grid</h3>
<div class="container-grid">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

https://codepen.io/JoeHastings/pen/PeEjjR

2 comments

@Michael_B 2018-05-08 17:20:18

Flex and Grid are different animals, so a behavior that's simple in flex may not translate well to grid.

A flex item can center across the container because flex layout works with flex lines. A flex line is a row or column.

When a flex item is asked to center in a row/column, it has access to the available space on the entire line, from beginning to end.

In grid layout, however, rows and columns have to contend with something that flex lines don't: track walls (a/k/a grid lines). For example, in your code there are three columns. These columns divide the track into three separate sections, and grid items are confined to a section.

Therefore, a grid item cannot automatically be centered on a row using keyword alignment properties (such as justify-content or justify-self) because the track walls restrict movement.

It is possible to make a grid area span the entire row/column, which then clears the way across the entire track, allowing a grid item to be centered horizontally (justify-content: center) or vertically (align-self: center), but this behavior must be explicitly defined.

For the grid item to be centered across the row in a dynamic layout the container would need to have only one column (i.e., no dividers), or the item would need to be explicitly moved to the center using something like line-based placement. Otherwise, use flexbox.

@TylerH 2018-06-15 16:19:59

By "track walls" are you simply referring to the grid tracks, or their gutters? I don't recall the spec ever using that term.

@Michael_B 2018-06-15 16:27:30

@TylerH, I use plain English as often as I can in my answers. "Track walls" is just how I see it. The point is that in flexbox the only obstruction to alignment are sibling items. But in grid, there is an additional obstruction: impenetrable tracks criss-crossing the grid.

@TylerH 2018-06-15 16:31:02

That's what I get for not reading the spec much in the last 15 months or so :-)

@johnny 2018-05-08 14:07:28

Not the way you want with flex. You have to be precise with CSS-Grid,

<h3>Grid</h3>
<div class="container-grid">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item-mid">item</div>
</div>
.container-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
    .item {
        background: red;
        border: 1px solid;
    }
    .item-mid{
        background:purple;
        grid-column:2/1;
    }

Also, look here,

Centering in CSS Grid

(this is not wrapping, however)

@HastingsDirect 2018-05-08 15:06:26

It surprises me grid can't handle this, it makes it a bit annoying when you don't know how many items there are going to be but you want any overflowing items to be centred (without getting javascript involved adding classes) seems like flex and percentage widths is the best option for this case

@johnny 2018-05-08 15:12:24

You can use flex in the grid or create a nested grid. I think the intention is to use flex for that because of the single axis and justify-content.

Related Questions

Sponsored Content

27 Answered Questions

[SOLVED] Flex-box: Align last row to grid

4 Answered Questions

12 Answered Questions

[SOLVED] How to Right-align flex item?

  • 2014-03-15 19:56:31
  • Mark Boulder
  • 632948 View
  • 619 Score
  • 12 Answer
  • Tags:   html css flexbox

4 Answered Questions

[SOLVED] The difference between justify-self, justify-items and justify-content in CSS Grid

  • 2018-01-31 06:11:56
  • keithlee96
  • 14133 View
  • 38 Score
  • 4 Answer
  • Tags:   css css-grid

3 Answered Questions

[SOLVED] CSS grid as child of flexbox not behaving as expected

1 Answered Questions

[SOLVED] Aligning flex items to the right

  • 2017-02-01 20:23:57
  • Shamseer Ahammed
  • 90 View
  • 2 Score
  • 1 Answer
  • Tags:   html css flexbox

1 Answered Questions

adding border to flex items in a row aligned to baseline

  • 2016-09-12 19:18:18
  • duebstep
  • 2650 View
  • 2 Score
  • 1 Answer
  • Tags:   html css flexbox

1 Answered Questions

Sponsored Content