CSS Grid vs Flexbox

Kratko: kdaj uporabiti katero

Flexbox za enodimenzionalne layoute (vrstica ali stolpec). Grid za dvodimenzionalne (vrstice in stolpci hkrati). V praksi: nav menu = flexbox. Galerija slik = grid. Card layout z 3 stolpci = grid.

Flexbox primer

Navigation menu s logom levo in linki desno:

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Grid primer

Galerija 3-stolpčna z odzivnimi pravili:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

To je responsive brez media queries – stolpci se sami prilagodijo širini zaslona.

Pravila, ki delujejo v praksi

• Card grid: Grid z auto-fit.
• Nav: Flexbox z space-between.
• Form layout: Grid z imenovanimi območji (grid-template-areas).
• Hero z mediji ob besedilu: Grid 2 stolpca, na mobilnem 1 stolpec.
• Pills / tagi v vrstici: Flexbox z flex-wrap: wrap.
• Sidebar + main content: Grid z grid-template-columns: 280px 1fr.

Hibrid je v redu

Pogosto najboljši pristop je grid kot zunanji layout in flexbox za posamezne karte znotraj grid celice:

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Pri Stran.si

Naša stran uporablja grid za vse glavne layout-e (services grid, references grid, blog grid, package grid), flexbox pa za nav menu, pills, card internals, in mobile sticky CTA.