1 

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

Improve this question
7
  • 1
    possible duplicate: stackoverflow.com/q/34644807/3597276 Commented Feb 13, 2018 at 19:57
  • CSS Grid gutters solution: stackoverflow.com/a/48755146/3597276 Commented Feb 13, 2018 at 19:58
  • @Michael_B why you don't close it then :) Commented Feb 13, 2018 at 20:01
  • 2
    @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. Commented Feb 13, 2018 at 20:07
  • 1
    @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. Commented Feb 13, 2018 at 20:14

1 Answer 1

Reset to default
1

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:

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.