CSS Grid-ஐப் பயன்படுத்தி ஒரு layout-ஐ எப்படி உருவாக்குவது?

Question

Accepted Answer

**CSS Grid** என்பது ஒரு இரு-பரிமாண layout அமைப்பு — Flexbox-இன் ஒற்றை வரிசையைப் போலன்றி, இது **rows மற்றும் columns இரண்டையும் ஒரே நேரத்தில்** கட்டுப்படுத்துகிறது. நீங்கள் container-இல் ஒரு grid-ஐ வரையறுத்து, அதனுள் item-களை வைக்கிறீர்கள்.

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

## fr unit மற்றும் repeat()

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

`fr` ("fraction") கிடைக்கும் இடத்தைப் பகிர்ந்தளிக்கிறது — `1fr 2fr` அதை 1:2 என பிரிக்கிறது. `repeat(3, 1fr)` என்பது மூன்று சம track-களுக்கான சுருக்கெழுத்து.

## media query இல்லாத responsive grid

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

இந்த ஒரே வரி முழுமையாக responsive ஆன ஒரு card grid-ஐ உருவாக்குகிறது: ஒவ்வொரு column-ம் குறைந்தபட்சம் `250px`; browser ஒரு வரிசைக்கு **முடிந்தவரை அதிகமாகப்** பொருத்தி, மீதியை wrap செய்கிறது — desktop-இல் 4 column-களிலிருந்து mobile-இல் 1 ஆகத் தானாகச் செல்கிறது. `auto-fit` + `minmax` என்பது Grid-இன் மிகவும் விரும்பப்படும் pattern-களில் ஒன்று.

## Cell-கள் முழுவதும் item-களை வைப்பது

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

Item-கள் பல row/column-களை span செய்யலாம், இது Flexbox-உடன் சிரமமான magazine-பாணி layout-களைச் சாத்தியமாக்குகிறது.

## Grid vs Flexbox

- **Grid** — 2D layout (rows *மற்றும்* columns): page layout-கள், card grid-கள், dashboard-கள்.
- **Flexbox** — 1D layout (ஒற்றை row அல்லது column): navbar-கள், button group-கள், மையப்படுத்துதல்.

இவை நன்றாக இணைகின்றன — ஒரு grid cell-ஆகவே ஒரு flex container-ஆக இருக்கலாம்.

## இது ஏன் முக்கியம்

Grid என்பது மிகவும் சக்திவாய்ந்த CSS layout கருவி — இது முழு-page layout-களையும் responsive card grid-களையும் சுத்தமாகக் கையாள்கிறது, பெரும்பாலும் nested-div hack-களை மாற்றுகிறது.

`auto-fit`/`minmax` responsive pattern மட்டுமே பல media query-களின் தேவையை நீக்குகிறது.