<p>CSS Grid</p>
<div class="grid">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>


<hr>

<p>Flexbox</p>
<div class="flex">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

body {
  padding: 3rem;
  background: #eee;
}
hr {
 margin: 2rem 0;
}

.item {
  height: 100px;
  box-shadow: 0 3px 5px black;
  background: #fff;
  border-radius: 5px;
  padding: 1rem;
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
}


.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex .item {
  width: calc(25% - (3rem  / 4));
}