remove margin bottom from the last line in wrapped elements

user_1754790 0
Viewed 63

How can I keep the margin-bottom only for the elements that are not in the last line ?

.container {
  display: flex;
  flex-flow: row wrap;
  background: green;
  justify-content: space-between;
}

.block {
  height: 60px;
  max-width: calc((100% - (12px * 2)) / 3);
  flex-basis: calc((100% - (12px * 2)) / 3);
  background: orange;
  box-shadow: inset 0 0 0 3px black;
  margin-bottom: 12px;
}
<div class="container">
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
</div>

Thanks in advance.

css
3 Answers

This is what you are looking for:

.container .block:nth-last-child(-n+3){
    margin-bottom: 0px;
  }
user_134685590

You can also use CSS grid:

.container {
  display: grid;
  grid-template-columns:repeat(3,1fr);
  grid-gap:12px;
  background: green;
}

.block {
  height: 60px;
  background: orange;
  box-shadow: inset 0 0 0 3px black;
}
<div class="container">
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
</div>

user_86203330

for flex and grid, you can use the gap propertie to avoid playing with margins:

https://developer.mozilla.org/en-US/docs/Web/CSS/gap

The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.

Applies to multi-column elements, flex containers, grid containers

see https://www.caniuse.com/?search=gap for support

to set 3 elements on a line, give a min-width bigger than 25% and set them to grow via flex-grow. for the demo i used 26%, should be small enough to leave room for the gaps .

Demo of your code witout margins but still a gap in between elements

.container {
  display: flex;
  flex-flow: row wrap;
  background: green;
  gap: 12px;
  /* see https://www.caniuse.com/?search=gap for support */
}

.block {
  height: 60px;
  flex: 1 1 0; /* or flex:1; */
  /* to stretch them at the most and even their sizes*/
  min-width: 26%;
  /* it cannot be more than 3 on a row */
  background: orange;
  box-shadow: inset 0 0 0 3px black;
  padding:5px; /* padding is fine */
}
<div class="container">
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
</div>
<hr>
<div class="container">
  <div class="block">A single line
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
</div>
<hr>
<div class="container">
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">a second and last line
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
</div>
<hr>

<div class="container">
  <div class="block">2 blocks , is that okay ?
  </div>
  <div class="block">
  </div>
</div>

user_24420990
Related