HTML - ukázka 1,  2 - sloupcové bloky vložíme do obalovacích bloků, třídy jsou použity u vnitřních bloků:

  <div>
    <div class="sl-1">sl-1</div>
  </div>
  <div>
    <div class="sl-2">sl-2</div>
    <div class="sl-2">sl-2</div>
  </div>
  <div>
    <div class="sl-3">sl-3</div>
    <div class="sl-3">sl-3<br>text text</div>
    <div class="sl-3">sl-3</div>
  </div>
  <div>
    <div class="sl-4">sl-4</div>
    <div class="sl-4">sl-4</div>
    <div class="sl-4">sl-4</div>
    <div class="sl-4">sl-4</div>
  </div>
  <div>
    <div class="sl-5">sl-5</div>
    <div class="sl-5">sl-5</div>
    <div class="sl-5">sl-5</div>
    <div class="sl-5">sl-5</div>
    <div class="sl-5">sl-5</div>
  </div>

CSS styly ukázky 1:

/* CSS Document */
/* základní styly */
.sl-1, .sl-2, .sl-3, .sl-4, .sl-5 {
 float: left; overflow: auto; box-sizing: border-box; padding: 0.2em 1em;
 border: 1px solid #6E4941; margin: 0.2em 0; background-color: #E3D6CD;}
.sl-1:first-child, .sl-2:first-child, .sl-3:first-child, .sl-4:first-child,
.sl-5:first-child {clear: left;} /* nutné při různé výšce bloků
- pro správné umístění prvního bloku skupiny zcela vlevo */

/* pro mobily */
.sl-1, .sl-2, .sl-3, .sl-4, .sl-5 {width: 100%;}

@media screen and (min-width: 1024px) {
  /* pro počítače */
  /* bez mezer mezi bloky
  .sl-1 {width: 100%;}
  .sl-2 {width: 50%;}
  .sl-3 {width: 33.33333332%;}
  .sl-4 {width: 25%;}
  .sl-5 {width: 20%;} */

  /* s mezerami mezi bloky */
  .sl-1 {width: 98%; margin: 1%;} /* 1% + 98% + 1% = 100%  */
  .sl-2 {width: 48%; margin: 1%;} /* 1% + 48% + 1% = 50%   */
  .sl-3 {width: 31.33333332%; margin: 1%;} /* 33.33333332% */
  .sl-4 {width: 23%; margin: 1%;} /* 25% */
  .sl-5 {width: 18%; margin: 1%;} /* 20% */
}

@media screen and (min-width: 600px) and (max-width: 1023px) {
  /* pro tablety */
  /* s mezerami mezi bloky */
  .sl-1 {width: 98%; margin: 1%;} /* 100% */
  .sl-2 {width: 48%; margin: 1%;} /* 50% */
  .sl-3 {width: 48%; margin: 1%;} /* budou 2 a 1 pod */
  .sl-4 {width: 48%; margin: 1%;} /* budou po 2 pod sebou */
  .sl-5 {width: 48%; margin: 1%;} /* budou 2 a 2 a 1 */

  /* vycentrování lichého bloku */
  .sl-3:last-child, .sl-5:last-child {float: none; margin-left: auto;
   margin-right: auto;}
}

CSS styly ukázky 2:

Styly pro mobily a počítače jsou stejné jako v ukázce 1.

Pro tablety jsou zde vytvořeny dvoje Media Queries - pro menší a pro větší tablety:

@media screen and (min-width: 800px) and (max-width: 1023px) {
  /* pro větší tablety a malé notebooky */
  .sl-1 {width: 98%;} /* bude 1 */
  .sl-2 {width: 48%;} /* budou 2 */
  .sl-3 {width: 31.33333332%;} /* budou 3  */
  .sl-4 {width: 48%;} /* budou po 2 pod sebou */
  .sl-5 {width: 31.33333332%;} /* budou 2 a 3 */
  /* horní 2 bloky z pětice - tedy první a druhý */
  .sl-5:nth-child(1), .sl-5:nth-child(2) {width: 48%;}
}

@media screen and (min-width: 600px) and (max-width: 799px) {
  /* pro malé tablety */
  .sl-1 {width: 98%;} /* bude 1 */
  .sl-2 {width: 48%;} /* budou 2 */
  .sl-3:first-child {width: 98%;} /* budou 1 a 2 pod ním */
  .sl-3:nth-child(2), .sl-3:nth-child(3) {width: 48%;} /* 2 spodní */
  .sl-4 {width: 48%;} /* budou po 2 pod sebou */
  .sl-5 {width: 48%;} /* budou 1 a 2 a 2 */
  .sl-5:first-child {width: 98%;} /* 1 horní */
}

HTM struktura - jiný způsob:

Class můžeme přiřadit ne blokům, které jsou zobrazeny jako tlačítka nebo sloupce, ale jejich nadřazeným blokům:

  <div class="blok-sl-1">
    <div></div>
  </div>
  <div class="blok-sl-2">
    <div></div>
    <div></div>
  </div>
  <div class="blok-sl-3">
    <div></div>
    <div></div>
    <div></div>
  </div>

Využijeme kontextuální definici stylu pro blok uvnitř dané třídy:

Místo třídy .sl-1 zapíšeme .blok-sl-1 > div. Obdobně vytvoříme třídy .blok-sl-2 až .blok-sl-5. Oba způsoby lze kombinovat. Sloupce v blocích, majících třídu blok-sl-1 apod., můžeme nastavit tak jako v ukázce 2, bloky uvnitř, které mají navíc třídu sl-1 apod., můžeme nastavit se stejnou šířkou jako v ukázce 1.