Kif toħloq layout bl-CSS Grid?

Question

Accepted Answer

**CSS Grid** hija sistema ta' layout b'żewġ dimensjonijiet — tikontolla **ringieli u kolonni simultanjament**, b'differenza minn Flexbox li huwa ta' linja waħda. Tiddefinisci grid fuq il-kontenitur u tpoġġi items fih.

```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 */
}
```

## L-unità `fr` u `repeat()`

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

`fr` ("fraction") tqassam l-ispazju disponibbli — `1fr 2fr` taqsmuh 1:2. `repeat(3, 1fr)` hija shorthand għal tliet tracks ugwali.

## Grid responsiv MINGĦAJR media queries

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

Di l-linja waħda toħloq grid ta' karti kompletament responsiv: kull kolonna għandha almenu `250px`; il-browser iddaħħal **kemm jista' jkun" għal kull ringiela u jilfa l-baqa' — awtomatikament tmur minn 4 kolonni fuq desktop għal 1 fuq mobile. `auto-fit` + `minmax` hija waħda mill-aktar mħabbuba patterns ta' Grid.

## Poġġi items fuq iċ-ċelluli

```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 */
```

Items jistgħu jistendu fuq ringieli/kolonni multipli, li jippermettu layouts ta' stil magazine li huma diffiċli bi Flexbox.

## Grid vs Flexbox

- **Grid** — layout 2D (ringieli *u* kolonni): page layouts, grid ta' karti, dashboards.
- **Flexbox** — layout 1D (ringiela waħda jew kolonna waħda): navbars, groups ta' buttons, ċentring.

Jikomponiżaw sewwa — ċellula ta' grid tista' hija stessa kontenitur flex.

## Għaliex għandu importanza

Grid hija l-iktar għodda potenti ta' CSS layout — tiddaħħal full-page layouts u responsive card grids b'mod ċar, spiss tirrimpiazza hacks ta' nested-divs.

Il-pattern responsiv `auto-fit`/`minmax` waħdu jirrmovvi l-ħtieġa għal bosta media queries.

L-unità fr u repeat()

Grid responsiv MINGĦAJR media queries

Poġġi items fuq iċ-ċelluli

Grid vs Flexbox

Għaliex għandu importanza

L-unità `fr` u `repeat()`