Search code examples
javascripthtmlcss

How to implement this kind of grid


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.