Yaya za ka ƙirƙira tsarin amfani tare da 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 */
}
```

## Raka fr da 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.

## Ganuwar jiya tare da babu tambayoyin media

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

An layin gida ya ƙirƙira ganuwar kati da cikakke malamdamewa: kowane ginshiki shine aƙalla `250px`; browser yana dace da **yawancin da zai iya** a kowane jeri kuma ya bugi sauran - ba tsammani yana tashi daga ginshiki 4 a gida zuwa 1 a waje. `auto-fit` + `minmax` ƙarɗa gida ce mafi so mu ta Grid.

## Ajiye abubuwa a cikin tantanin cells

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

Abubuwa koma a fifita da yawa / ginshiki, suna ba da daidai hari ɗin tsarin kagarantawa wanda ba shi da kaya tare da Flexbox.

## Grid vs Flexbox

- **Grid** — Tsarin 2D (jeri *da* ginshiki): tsarin shafi, kati ƙarfa, boards.
- **Flexbox** — Tsarin 1D (layin gida ko ginshiki): sandar guida, rukunin butu, tsakiya.

Sun haɗa sosai — cell na grid kanta zai iya zama abun jiya flex.

## Me ya sa yana mahimmanci

Grid shine kayan ɗin da aka saba da ku na CSS - tana tafiya da shafuka-cikakke tsarin da jiya karfi da kyau, sau da yawa-tare da ƙirƙira-div hacks.

Pa `auto-fit`/`minmax` malamdamewa tasan kawai kuma share sha adadin tambayoyin media.