Vytvorte bloky červené, modré a sivé pomocou iba CSS (bez zmeny štruktúry, bez pridania obalov). Bloky by mali byť usporiadané podľa príkladu na obrázku. Môžete nastaviť štýly pre kontajner a samotné bloky.

Ak chcete umiestniť červené, modré a sivé bloky podľa príkladu na obrázku, pomocou iba CSS bez zmeny štruktúry HTML a bez pridania obalov, môžete použiť CSS Grid alebo Flexbox s poradím prvkov a ich pozíciou.

Napríklad, ak máme tri bloky s triedami .red, .blue, .grey v kontajneri .container, a chceme ich usporiadať v určitom poradí alebo mriežke, môžeme to urobiť takto:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

.red {
  background-color: red;
  grid-column: 1 / 2;
  grid-row: 1 / 3; /* zaberá dva riadky */
}

.blue {
  background-color: blue;
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

.grey {
  background-color: grey;
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

Ak je potrebné iné usporiadanie, môžete upraviť grid-column a grid-row podľa požadovaného rozloženia. Dôležité je použiť CSS Grid alebo Flexbox s kontrolou poradia a veľkosti blokov, bez zmeny HTML.

Ak je príklad na obrázku odlišný, upresnite usporiadanie a pomôžem s presným CSS.