CODEWITHSUNDEEP
htmlcssflexbox
webta.st.ic
webta.st.ic

Reputation: 5169

Remove margin-right when flex-wrap is wraping elements with pure CSS

I've got a wrapper and some items within. I would like to place two items next to other in each row. I used flexbox to solve this.

My wrapper has the property flex-wrap: wrap; and my items have the property: flex: 0 0 45%;. So every of my items use 50% of the row (included the margins). I use margin to make a gap on the right side and a gap on the bottom between the items. This works almost as I expected.

Now my question: Is there a way to ignore the margin-right on the second item in each row (where it wraps), so the second item is also aligned to the right side of the wrapper same as the left item is. At the moment, there is also a gap at the end of the row because of the margin-right. I would like to remove this gap. Is this possible with pure CSS? last-child just removes the margin-right on the last item, but this is clear why. Is there a way to remove it on the end of the row, where the items wrap? Hope this is clear enough.

Below my snippet:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border: 1px solid black;
  width: 768px;
}

.wrapper__item {
  flex: 0 0 45%;
  width: 330px;
  height: 160px;
  margin: 0 36px 18px 0;
  background-color: lightcoral;
}
<div class="wrapper">
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
</div>

Here is also a screenshot where I would like to remove the margin-right (see arrows):

enter image description here

Upvotes: 8

Views: 8270

Answers (5)

g.annunziata
g.annunziata

Reputation: 3266

It would be simpler using gap css property:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border: 1px solid black;
  width: 600px;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 18px;
}

.wrapper__item { 
  flex: 1;           
  min-width: calc(300px - 18px); 
  height: 160px;     
  background-color: lightcoral;
}
<div class="wrapper">
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
</div>

It will work with important changes on item:

  • flex: 1
  • min-width instead of width

and on wrapper:

  • gap: 18px to create a gap between elements

You can create a different gap between horizontal and vertical with: gap: HR VR where HR is horizontal gap, and VR is vertical gap; i.e.:
gap: 10px 18px
or using column-gap and/or row-gap properties.

Upvotes: 1

Shreevardhan
Shreevardhan

Reputation: 12641

Use justify-content: space-between and height of wrapper with align-content optionally

.wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid black;
  width: 768px;
  height: 588px;
}

.wrapper__item {
  width: 330px;
  height: 160px;
  background-color: lightcoral;
}
<div class="wrapper">
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
</div>

Upvotes: 0

Bhuwan
Bhuwan

Reputation: 16855

Remove margin-right and use justify-content: space-between and use width:calc(50%-18px). It will give you exactly the 36px gap between your items.

Stack Snippet

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border: 1px solid black;
  width: 768px;
  justify-content: space-between;
}

.wrapper__item {
  width: calc(50% - 18px);
  height: 160px;
  margin: 0 0 20px 0;
  background-color: lightcoral;
}
<div class="wrapper">
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
</div>

Reference Link

Upvotes: 4

Jiang Xuan
Jiang Xuan

Reputation: 98

  .wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border: 1px solid black;
    width: 768px;
  }

  .wrapper__item {
    flex: 1 0 45%;
    /*   width: 330px; */
    height: 160px;
    margin: 0 36px 18px 0;
    background-color: lightcoral;
  }

  .wrapper div:nth-child(2n) {
    margin-right: 0;
  }
  <div class="wrapper">
    <div class="wrapper__item">Item</div>
    <div class="wrapper__item">Item</div>
    <div class="wrapper__item">Item</div>
    <div class="wrapper__item">Item</div>
    <div class="wrapper__item">Item</div>
    <div class="wrapper__item">Item</div>
</div>

Remove width: 330px; in .wrapper__item selector.

Modify flex: 0 0 45%; to flex: 1 0 45%; in .wrapper__item selector.

Add css code:

.wrapper div:nth-child(2n) {
    margin-right: 0;
}

Hope helpful :).

Upvotes: 5

caffely
caffely

Reputation: 46

If you can handle how many items per row you can use :nth-child(2n)

Upvotes: 1

Related Questions