CODEWITHSUNDEEP
htmlcssflexbox
Kris Jones
Kris Jones

Reputation: 635

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

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

Upvotes: 1

Views: 1685

Answers (1)

Asons
Asons

Reputation: 87292

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:

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:

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

Upvotes: 1

Related Questions