Je možné použiť CSS Grid a Flexbox súčasne v jednom projekte?

Áno, je to možné a je to bežná prax.

CSS Grid a Flexbox riešia rôzne úlohy a navzájom sa skvele dopĺňajú.

• Flexbox je ideálny na zarovnávanie a rozdeľovanie prvkov v jednom rozmere (riadok alebo stĺpec).
• CSS Grid je určený na tvorbu dvojrozmerných rozložení, ktoré riadia zároveň riadky aj stĺpce, a je skvelý na štruktúrovanie stránky.

Príklad spoločného použitia môže byť:

• Použitie Grid na vytvorenie všeobecnej štruktúry stránky (záhlavie, bočný panel, hlavný obsah, päta).
• Použitie Flexbox vo vnútri každého bloku (napríklad v záhlaví na zarovnanie loga a navigácie alebo vo vnútri karty produktu na zarovnanie obrázka, ceny a popisu).

.container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* Dve stĺpce */
  grid-gap: 20px; /* Medzera medzi stĺpcami */
}

.sidebar {
  /* Štýly pre bočný panel */
}

.main-content {
  /* Štýly pre hlavný obsah */
  display: flex; /* Používame Flexbox vo vnútri hlavného obsahu */
  flex-direction: column; /* Elementy budú usporiadané v stĺpci */
  gap: 10px; /* Medzera medzi elementmi v hlavnom obsahu */
}

.card {
  /* Štýly pre karty v hlavnom obsahu */
  display: flex; /* Používame Flexbox v karte */
  align-items: center; /* Vertikálne zarovnanie prvkov na stred */
  gap: 15px; /* Medzera medzi prvkami v karte */
}

Použitie týchto nástrojov spoločne umožňuje vytvárať zložité a flexibilné rozloženia, optimalizujúc každý komponent pre jeho špecifické úlohy.