<h1>Brick-Like Tile Effect</h1>
<ul class="bricks">
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Block Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li>
    <h2>Title Block</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
</ul>

body {
  background: #bcd;
  font-family: sans-serif;
}
h1,
h2 {
  text-align: center;
}
.bricks {
  list-style: none;
  margin: 1em auto;
  max-width: 80em;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  justify-content: center;
}

.bricks li {
  box-sizing: border-box;
  flex: 0 0 24%;
  border: 1px #000 solid;
  background: #fdc;
  padding: 0.5em;
  border-radius: 6px;
  box-shadow: 3px 3px 5px rgba(0, 50, 100, 0.3);
}
.bricks li:nth-child(3n) {
  background: #edb;
}
.bricks li:nth-child(even) {
  background: #ecc;
}

.bricks li:nth-child(7n + 5) {
  margin-left: 2em;
}

@media screen and (max-width: 41em) {
  .bricks li:nth-child(7n + 5) {
    margin-left: 0;
  }
  .bricks li {
    flex: 0 0 30%;
  }
  .bricks li:nth-child(5n + 4) {
    margin-left: 3em;
  }
}
@media screen and (max-width: 26em) {
  .bricks {
    flex-direction: column;
  }
  .bricks li {
  }
  .bricks li:nth-child(n + 1) {
    margin-left: 0;
  }
}