Čarobni štapić +381 (0)61 755 74 77

Grid

Lekcija 07 — CSS Grid Layout

Uvod

CSS Grid Layout je najmoćniji moderni alat za pravljenje dvodimenzionalnih rasporeda na web stranici. Za razliku od Flexbox-a, koji je „jednodimenzionalan“ (ili radi raspored u redu ili u koloni), Grid omogućava da u isto vreme kontrolišeš redove i kolone, praviš složene šablone, zone, rasporede celih sekcija i responzivne mreže sa minimalno koda.

Ako si ikada pokušao da praviš složeni raspored pomoću float-a, inline-block elemenata ili 50 media query-a — Grid ti rešava većinu tih problema elegatno i jednostavno.

Šta je CSS Grid i kako funkcioniše

Kada na roditeljski element postaviš display: grid;, on postaje grid kontejner, a njegova deca postaju grid item-i. Zatim možeš da definišeš:

  • broj kolona

  • broj redova

  • razmake

  • širine i visine

  • automatsko raspoređivanje

  • poravnanje

  • grid zone

Drugim rečima — praviš tabelu, ali mnogo fleksibilniju i dizajnerski slobodniju.

Osnovna podešavanja Grid-a

Najvažnija svojstva za početak:

1. Definisanje kolona


 

grid-template-columns: 200px 200px 200px;

Pravi 3 kolone širine 200px.

Možeš koristiti i fleksibilne jedinice:


 

grid-template-columns: 1fr 2fr 1fr;

fr = „fraction” — delovi dostupnog prostora.

2. Definisanje redova


 

grid-template-rows: 150px 150px;

Dva reda od po 150px.

3. Razmak između elemenata


 

gap: 20px;

Razmak između kolona i redova.

4. Automatsko raspoređivanje

Grid ume sam da rasporedi stavke, što je savršeno za galerije, blog listinge, portfolio stranice itd.

Praktičan primer — jednostavna 3-kolonska mreža

<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="UTF-8">
<title>CSS Grid Primer</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 10px;
    background: #f5f5f5;
  }

  .grid-item {
    background: #cce5ff;
    border: 1px solid #333;
    padding: 20px;
    text-align: center;
    font-size: 18px;
  }
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

</body>
</html>

Objašnjenje:

  • display: grid; — aktivira Grid

  • repeat(3, 1fr) — tri fleksibilne kolone

  • gap: 15px — razmak između blokova

  • Stavke se automatski raspoređuju po redu i koloni

Naprednije mogućnosti CSS Grid-a

1. Spajanje kolona (span)


 

.grid-item:first-child { grid-column: span 2; }

Prvi element sada zauzima dve kolone.

2. Spajanje redova


 

.grid-item:nth-child(2) { grid-row: span 2; }

Zauzimanje 2 reda.

3. Automatski “responsive” Grid — bez media query-a

Ovo je jedan od najvećih benefita Grid-a:


 

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Ovim se pravi savršeno responzivna mreža:

  • svaka kolona ima minimum 250px

  • kada ima mesta — širi se do 1fr

  • kada nema mesta — prelazi u novi red

Ovo je idealno za galerije i liste blog postova.

Napredni primer — responzivna galerija


 

<style>
.gallery {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.item {
  background: #e2e2e2;
  padding: 40px;
  border-radius: 6px;
  text-align: center;
}
</style>

<div class="gallery">
  <div class="item">Slika 1</div>
  <div class="item">Slika 2</div>
  <div class="item">Slika 3</div>
  <div class="item">Slika 4</div>
  <div class="item">Slika 5</div>
</div>
 

 

Radi savršeno od mobilnog do desktop ekrana — bez jedne jedine media query.

Grid template areas — kreiranje zoniranja layout-a

Možeš da nacrtaš raspored kao „ASCII mapu“:


 

.grid-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  gap: 20px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
 

HTML:


 

<div class="grid-layout">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

Dobiješ kompletan layout sa samo par linija CSS-a.

Flexbox vs Grid — kada koristiš šta?

Flexbox Grid
Jednodimenzionalni layout (red ili kolona) Dvodimenzionalni layout (redovi + kolone)
Idealno za raspored elemenata u jednom nizu Idealno za celokupne sekcije i složene rasporede
Dinamičan, fluidan Strukturiran, mrežast
Dobar za navigacije, dugmiće, kartice Dobar za cele layout-e, galerije, portfolio rasute liste

U praksi — često se koriste zajedno.

Zaključak

CSS Grid je jedan od najvažnijih modernih alata za pravljenje layout-a. Omogućava izuzetno moćne, responzivne i fleksibilne rasporede uz minimalno koda. Grid ti daje potpunu kontrolu nad rasporedom elemenata i značajno olakšava izradu kompleksnih web stranica.

Ako razumeš osnovne pojmove — kolone, redove, gap, auto-fit, grid-areas — više od 90% layout situacija možeš rešiti bez komplikacija.

Zadatak za vežbu (za kraj lekcije)

Napraviti responzivan raspored od 6 kutija koji:

  • ima 3 kolone na desktopu

  • 2 kolone na tablet veličini

  • 1 kolonu na mobilnom telefonu

  • koristi Grid (ne Flexbox)

  • koristi minmax() i auto-fit