How to span two columns on a 3x3 grid with flexbox with paddings?

Question

.page {
  width: 90% margin: auto;
}

.row-container {
  width: 100%;
  display: flex;
}

.item-container {
  flex: 1;
  padding: 16px;
}

.item-container-2x {
  flex: 2;
}

.item {
  background-color: #e7e8e9;
  height: 50px;
  border: 1px solid #dddddd;
}

<div class="page">
  <div class="row-container">
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
  <div class="row-container">
    <div class="item-container item-container-2x">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
</div>

The issue here is with the paddings. It causes the grid on the second row to be misaligned.

I'm using flex: 1; for the equal width grid items, and flex: 2; next to one with flex: 1; for the second row. My understanding is that the flex numbers add up. I'm trying to add them up to 3, but in the second row, having only one margin between the two grid items is impacting to spacing. I'm not sure if this approach is better than defining variable widths for the gird items, but using flex seems simple to me.

I think there's also a problem that I'm using fixed paddings of 16px with the variable width withflex: 1/2. I did try percentage margin and still had the same problem. And I'm having a hard time getting my head around needing to use a combination of padding and margin, and maybe even negative margin.

Thanks for any help.

possible duplicate: https://stackoverflow.com/q/34644807/3597276 — Michael Benjamin, Feb 13 '18 at 19:57
CSS Grid gutters solution: https://stackoverflow.com/a/48755146/3597276 — Michael Benjamin, Feb 13 '18 at 19:58
@TemaniAfif, because I'm not 100% sure the question is a dupe. Reviewed enough to make the association, but not enough to close. Feel free to go ahead. — Michael Benjamin, Feb 13 '18 at 20:07
@TemaniAfif At that dupe longhand `flex-grow` is used, which gives another result than shorthand `flex` will, hence it is not fully the same. The issue here is caused by Flexbox more complicated way of calculating _space left_ on flex items where padding is used. — Asons, Feb 13 '18 at 20:14
If you're trying to create a grid, why not use `display: grid`? — jhpratt, Feb 13 '18 at 20:51
@Michael_B Linked to a couple of answers of yours/ours...the suggested dupe as well, as I find it a good read. — Asons, Feb 13 '18 at 20:54

Asons · Answer 1 · 2018-02-13T21:02:00.470

When using padding on a flex item, Flexbox has a somewhat more complicated way of calculating the space left, which makes it a little more tricky to make that work.

In this case, and to keep using flex-grow for sizing, using margin on the flex item's child (item) would be simpler. It will give the same output as padding does on a parent, with a non-flex child.

Stack snippet

.page {
  width: 90%;
  margin: auto;
}

.row-container {
  width: 100%;
  display: flex;
}

.item-container {
  flex: 1;
}

.item-container-2x {
  flex: 2;
}

.item {
  background-color: #e7e8e9;
  height: 50px;
  border: 1px solid #dddddd;
  margin: 16px;                                     /*  moved from ".item-container" and changed to "margin"  */
}

<div class="page">
  <div class="row-container">
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
  <div class="row-container">
    <div class="item-container item-container-2x">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
</div>

If you need, or have, to use padding on the flex items, you need to compensate for the removed item's padding (16px on each side), and add it as an initial flex-basis on the spanned item.

Stack snippet

.page {
  width: 90%;
  margin: auto;
}

.row-container {
  width: 100%;
  display: flex;
}

.item-container {
  flex: 1;
  padding: 16px;
}

.item-container-2x {
  flex: 2 32px;                                       /*  changed  */
}

.item {
  background-color: #e7e8e9;
  height: 50px;
  border: 1px solid #dddddd;
}

<div class="page">
  <div class="row-container">
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
  <div class="row-container">
    <div class="item-container item-container-2x">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
</div>

In another answer of mine, I made a flex box table version, which might help you further. Check out the "Stack snippet - Flexbox" sample at this link:

Layout a flex box similar to a table?

As a side note, and since you mentioned trying with percent value, that is gonna give you some more issues, which you can read more about here:

Why doesn't percentage padding / margin work on flex items in Firefox?

And here is some more reading about sizing items with flex-grow:

flex-grow not sizing flex items as expected

How to span two columns on a 3x3 grid with flexbox with paddings?

1 Answers1