Web programiranje → HTML, CSS i JavaScript → CSS: raspored pomoću flexbox-a i grid-a

CSS: raspored pomoću flexbox-a i grid-a

Flexbox: elementi u redu

Roditelj dobija display: flex, a njegova deca postaju „fleks elementi“ poređani u red:

<style>
  .meni {
    display: flex;
    gap: 10px;                       /* razmak između elemenata */
    justify-content: space-between;  /* raspored po glavnoj osi (horizontalno) */
    align-items: center;             /* poravnanje po poprečnoj osi (vertikalno) */
    background: #1f5f91;
    padding: 10px;
  }
  .meni a { color: white; text-decoration: none; padding: 6px 10px; }
  .logo { font-weight: bold; font-size: 1.4rem; color: #ffd166 !important; }
</style>
<nav class="meni">
  <a class="logo" href="#">LOGO</a>
  <div>
    <a href="#">Početna</a>
    <a href="#">Projekti</a>
    <a href="#">Kontakt</a>
  </div>
</nav>

Rezultat:

Flexbox: kartice koje prelaze u novi red

<style>
  .kartice { display: flex; flex-wrap: wrap; gap: 12px; }
  .kartica {
    flex: 1 1 140px;          /* raste, smanjuje se, početna širina 140px */
    background: #eef6fc;
    border-radius: 10px;
    padding: 12px;
  }
</style>
<div class="kartice">
  <div class="kartica">HTML</div>
  <div class="kartica">CSS</div>
  <div class="kartica">JavaScript</div>
  <div class="kartica">Python</div>
  <div class="kartica">C++</div>
</div>

Rezultat:

Smanji prozor pregledača: kartice same prelaze u novi red kada ne staju. Tako se bez ijednog dodatnog pravila dobija raspored koji radi i na telefonu.

Grid: mreža redova i kolona

<style>
  .galerija {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 3 jednake kolone */
    gap: 8px;
  }
  .galerija div { background: #2b7bb9; color: white; padding: 20px; text-align: center; border-radius: 6px; }
  .siroka { grid-column: span 2; background: #1f5f91 !important; }   /* zauzima 2 kolone */
</style>
<div class="galerija">
  <div>1</div><div>2</div><div>3</div>
  <div class="siroka">4 (dve kolone)</div><div>5</div>
  <div>6</div><div>7</div><div>8</div>
</div>

Rezultat:

Grid: raspored cele stranice

<style>
  .stranica {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
      "zaglavlje zaglavlje"
      "meni      sadrzaj"
      "podnozje  podnozje";
    gap: 6px;
    min-height: 220px;
  }
  header { grid-area: zaglavlje; background: #1f5f91; color: white; }
  nav    { grid-area: meni;      background: #cfe3f3; }
  main   { grid-area: sadrzaj;   background: #eef6fc; }
  footer { grid-area: podnozje;  background: #ddd; }
  header, nav, main, footer { padding: 10px; }
</style>
<div class="stranica">
  <header>Zaglavlje</header>
  <nav>Meni</nav>
  <main>Glavni sadržaj</main>
  <footer>Podnožje</footer>
</div>

Rezultat:

Oblasti se „crtaju“ tekstom u grid-template-areas, a svaki element dobija svoje mesto preko grid-area. Promena rasporeda (npr. za telefon) svodi se na drugačiji crtež.

Flexbox ili grid?

Često se kombinuju: grid za celu stranicu, flexbox unutar zaglavlja. Za vežbu postoje igre Flexbox Froggy (ima i srpski jezik) i Grid Garden.

Zadaci za vežbu

Za svaki zadatak postoji primer, uputstvo i rešenje. Rešenja su provereno ispravna u pregledaču.

Proveri znanje