Collapsing margin in grid?

Question

I've added a margin to the grid boxes and want to have the same space between the outer margin and inner one. But it seems that you cant collapse margins in a grid so the outer border is half as thick as the inner one. Is there a way to have them all the same size?

I've tried margin on the container but that adds scrollbars which i dont want.

.grid__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100vh;
  width: 100vw;
  min-width: 0;
  min-height: 0;
}

.grid__content__text {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: blanchedalmond;
  margin: 2%;
  height: auto;
}

.grid__content__text:hover {
  background-color: rgb(250, 74, 74);
}

<div class="grid__container">
  <div class="grid__content__text">1</div>
  <div class="grid__content__text">2</div>
  <div class="grid__content__text">3</div>
  <div class="grid__content__text">4</div>
  <div class="grid__content__text">1</div>
  <div class="grid__content__text">2</div>
  <div class="grid__content__text">3</div>
  <div class="grid__content__text">4</div>
  <div class="grid__content__text">1</div>
  <div class="grid__content__text">2</div>
  <div class="grid__content__text">3</div>
  <div class="grid__content__text">4</div>
  <div class="grid__content__text">1</div>
  <div class="grid__content__text">2</div>
  <div class="grid__content__text">3</div>
  <div class="grid__content__text">4</div>
</div>

https://jsfiddle.net/kc6fm3r4/5/

Answer 1

to seperate the grid-cards you should not use margin in the first place. As such I removed those. Use a padding for the "outer margin" and gap to seperate the cards instead:

.grid__container {
  gap: 5px;
  padding: 5px;
}

/* original CSS */
.grid__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100vh;
  width: 100vw;
}

.grid__content__text {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: blanchedalmond;
}

.grid__content__text:hover {
  background-color: rgb(250, 74, 74);
}

/* reset body margin */
body {
  margin: 0;
}

/* box-sizing reset to prevent horizontal overflow in combination with width: 100vw; */
.grid__container {
  box-sizing: border-box;
}

<div class="grid__container">
  <div class="grid__content__text">1</div>
  <div class="grid__content__text">2</div>
  <div class="grid__content__text">3</div>
  <div class="grid__content__text">4</div>
  <div class="grid__content__text">1</div>
  <div class="grid__content__text">2</div>
  <div class="grid__content__text">3</div>
  <div class="grid__content__text">4</div>
  <div class="grid__content__text">1</div>
  <div class="grid__content__text">2</div>
  <div class="grid__content__text">3</div>
  <div class="grid__content__text">4</div>
  <div class="grid__content__text">1</div>
  <div class="grid__content__text">2</div>
  <div class="grid__content__text">3</div>
  <div class="grid__content__text">4</div>
</div>