Button to the very edge, delete margin

Question

I have a question: How can I do the buttons to the very edge of the blue border while keeping the margin between the buttons? How to delete margin from right and bottom. I use flexbox and it is work fine but I don't know how to delete this margin. I would like delete margin which I marked in green,

.container {
  width: 80%;
  border: 1px solid blue;
  display: flex;
  flex-wrap: wrap;
}

button {
  margin-right: 2em;
  margin-bottom: 2em;
}

<div class="container">
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
</div>

CSS has so-called pseudo-selectors like [`:last-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child) and [`:nth-child`](https://www.w3schools.com/cssref/sel_nth-child.asp) — Clijsters, Dec 11 '17 at 10:23

score 1 · Accepted Answer · answered Dec 11 '17 at 10:26

Achieveing that using flexbox is quite a challenge because there is no built in flexbox feature to have gaps between columns.

Better way to set distance between flexbox items

However if you would use grid, you could easily achieve it.

.container {
    width: 80%;
    border: 1px solid blue;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 2em;
}

<div class="container">
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
</div>

Button to the very edge, delete margin

1 Answers1