grid.css

grid.css

.Grid {
  --Grid-cell-width: 5em; /* Change this */
  --Grid-gutter: 0.5em;

  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--Grid-gutter) * 0.5);
}

.Grid > * {
  flex: 1 0 var(--Grid-width);
  margin: var(--Grid-gutter);
}

.Grid > *:nth-child(5) {
  flex-basis: 10em;
}

.Grid > *:first-child {
  flex-basis: calc(100% - var(--Grid-gutter));
}



.Grid-wrap {
  /* Use this for eg. margin styles around to not break the grid */
}

index.html

<div class="Grid-wrap">
  <div class="Grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>