Si krijoni një layout me CSS Grid?

Question

Accepted Answer

**CSS Grid** është një sistem layout dy-dimensional — kontrollon **rreshtat dhe kolonat njëkohësisht**, ndryshe nga Flexbox i cili funksionon në një linjë të vetme. Ju përcaktoni një grid në container dhe vendosni artikujt në të.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## Njësia fr dhe repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` ("fraksion") shpërndan hapësirën e disponueshme — `1fr 2fr` e ndan atë 1:2. `repeat(3, 1fr)` është shkurtim për tre track të barabartë.

## Grid responsiv pa media queries

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

Kjo një linjë krijon një grid kartash plotësisht responsiv: secila kolonë është të paktën `250px`; shfletuesi përshtatet **sa më shumë që të jetë e mundur** për rresht dhe palos pjesën e mbetur — në mënyrë automatike duke shkuar nga 4 kolona në desktop në 1 në mobile. `auto-fit` + `minmax` është një nga modelet më të dashura të Grid.

## Vendosja e artikujve në qeliza

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

Artikujt mund të zgjerohen në rreshta/kolona të shumta, duke mundësuar layout në stil magazine që janë të vështira me Flexbox.

## Grid vs Flexbox

- **Grid** — layout 2D (rreshta *dhe* kolona): page layouts, grid kartash, dashboards.
- **Flexbox** — layout 1D (një rresht ose kolonë të vetme): navbars, grupe butonash, qendrim.

Ato funksionojnë mirë së bashku — një qelizë grid mund të jetë vetë një flex container.

## Pse ka rëndësi

Grid është mjeti më i fuqishëm i layout CSS — menaxhon page layouts të plota dhe grid kartash responsiv në mënyrë të pastër, shpesh duke zëvendësuar hackat e nested-div.

Modeli responsiv `auto-fit`/`minmax` vetëm ai heq nevojën për shumë media queries.