How to implement this kind of grid

April 13, 2024

How can I create this component with static data and make it responsive
enter image description here

Here is what I already created:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns each taking up equal space */
  grid-template-rows: repeat(4, 1fr); /* 4 rows each taking up equal space */
  gap: 10px; /* Gap between grid items */
  width: 100%; /* Width of the grid container */
  height: 100vh; /* Height of the grid container (100% of the viewport height) */
}

.grid-item {
  background-color: #ccc; /* Background color of grid items */
  border: 1px solid #999; /* Border around grid items */
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>
</div>

Here is an image preview: enter image description here

>Solution :

You could consider doubling the amount of grid layout columns. Then offset every other row by one column, so that it creates the brick-work effect. For the last row, offset the layout further to make the items appear in the middle:

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 4 columns each taking up equal space */
  grid-template-rows: repeat(5, 1fr); /* 4 rows each taking up equal space */
  gap: 10px; /* Gap between grid items */
  width: 100%; /* Width of the grid container */
  height: 100vh; /* Height of the grid container (100% of the viewport height) */
}

.grid-item {
  background-color: #ccc; /* Background color of grid items */
  border: 1px solid #999; /* Border around grid items */
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: span 2 / span 2;
}

.grid-item:nth-child(7n + 5) {
  grid-column-start: 2;
}

.grid-item:nth-last-child(2) {
  grid-column-start: 3;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>
</div>

For responsiveness, you could consider using CSS rules in media queries to adjust the grid column count and the item offsets to taste.