Conas a dhéanann tú leagan amach le CSS Grid?

Question

Accepted Answer

**CSS Grid** is a two-dimensional layout system — it controls **rows and columns simultaneously**, unlike Flexbox's single line. You define a grid on the container and place items into it.

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

## An t-aonad fr agus repeat()

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

`fr` ("fraction") distributes available space — `1fr 2fr` splits it 1:2. `repeat(3, 1fr)` is shorthand for three equal tracks.

## Gréid fhreagartha gan media queries

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

Cruthaíonn an líne amháin seo gréid chárta a bhfuil freagra iomlán aici: tá gach colún ar a laghad `250px`; oibríonn an brabhsálaí **an oiread agus is féidir** in aghaidh an tsraith agus fillte ar an chuid eile — ag gluaiseacht go huathoibríoch ó 4 cholún ar dheasc go 1 ar ghuthán. Is ceann de na patrúin is bhreá le daoine a bhaineann le Grid a bhí i `auto-fit` + `minmax`.

## Coimeádáin ar leith ar iomadh ceall

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

Is féidir le míreanna a leathnú ar iomadh sraith/colún, ag ligean do leagain amach ar nós iris atá fánach le Flexbox.

## Grid vs Flexbox

- **Grid** — Leagan amach 2D (sraitheanna *agus* colúin): leagain amach leathanaigh, gréid chárta, dealbhchláir.
- **Flexbox** — Leagan amach 1D (sraith amháin nó colún): barra loingseoireachta, grúpaí cnaipe, lárú.

Comhdhéanann siad go maith — is féidir le ceall gréid a bheith ina choimeádán flex féin.

## Cén fáth a bhfuil sé tábhachtach

Is é Grid an uirlis leagan amach CSS is cumhachtaí — soláthraíonn sé leagain amach ar an bhfullíonn an leathanaigh agus gréid chárta fhreagartha go geal, go minic in ionad cleasanna div foluain.

Baineann an patrúin fhreagartha `auto-fit`/`minmax` amháin an gá atá le go leor iarratas ar fhilm.