On gists

Centered last row with flex / grid

CSS CSS trick

grid.html Raw #

<!--
https://codepen.io/kevinpowell/pen/OJaBNQE
-->

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>

  <div class="grid-item offset"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>



<style>
 .grid {
  margin: 2rem auto;
  max-width: 900px;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(8, 1fr);
}

.grid-item {
  padding: 2rem;
  background: lightblue;
  border: 4px solid royalblue;

  grid-column: span 2;
}

.offset {
  grid-column: 2 / span 2;
}
</style>

flex.html Raw #

<!--
https://codepen.io/kevinpowell/pen/jOQeqZJ
-->

<div class="flexi-grid">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>

</div>


<style>
 * {
  box-sizing: border-box;
}

.flexi-grid {
  margin: 2rem auto;
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  border: 2px solid hotpink;
}

.flex-item {
  padding: 2rem;
  background: lightblue;
  border: 4px solid royalblue;

  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: calc(25% - (3rem / 4));
  /* 25% for each one, but we have 3rem gap
     which we need to split across the 4 items */
}
</style>