ਤੁਸੀਂ CSS Grid ਦੇ ਨਾਲ ਇੱਕ ਲੇਆਉਟ ਕਿਵੇਂ ਬਣਾਉਂਦੇ ਹੋ?

Question

Accepted Answer

**CSS Grid** ਇੱਕ ਦੋ-ਅਯਾਮੀ ਲੇਆਉਟ ਸਿਸਟਮ ਹੈ — ਇਹ **ਕਤਾਰਾਂ ਅਤੇ ਕਾਲਮਾਂ ਨੂੰ ਇੱਕ ਸਮੇਂ** ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ, Flexbox ਦੀ ਇੱਕਲੌਤੀ ਲਾਈਨ ਦੇ ਉਲਟ। ਤੁਸੀਂ ਕਨਟੇਨਰ ਵਿੱਚ ਇੱਕ ਗਰਿਡ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹੋ ਅਤੇ ਇਸ ਵਿੱਚ ਵਸਤੂਆਂ ਰਖਦੇ ਹੋ।

```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 ਯੂਨਿਟ ਅਤੇ 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)` ਤਿੰਨ ਬਰਾਬਰ ਟਰੈਕਾਂ ਲਈ ਸ਼ਾਰਟਹੈਂਡ ਹੈ।

## ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਦੇ ਬਿਨਾਂ ਜਵਾਬੀ ਗਰਿਡ

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

ਇਹ ਇੱਕ ਲਾਈਨ ਇੱਕ ਪੂਰੀ ਤਰ੍ਹਾਂ ਜਵਾਬੀ ਕਾਰਡ ਗਰਿਡ ਬਣਾਉਂਦੀ ਹੈ: ਹਰੇਕ ਕਾਲਮ ਘੱਟੋ-ਘੱਟ `250px` ਹੈ; ਬ੍ਰਾਊਜ਼ਰ **ਜਿੰਨੇ ਸੰਭਵ ਹੋ** ਪ੍ਰਤੀ ਪੰਕਤੀ ਵਿੱਚ ਫਿੱਟ ਕਰਦਾ ਹੈ ਅਤੇ ਬਾਕੀ ਨੂੰ ਰੈਪ ਕਰਦਾ ਹੈ — ਆਟੋਮੈਟਿਕ ਤੌਰ ਤੇ ਡੈਸਕਟਾਪ ਤੇ 4 ਕਾਲਮ ਤੋਂ ਮੋਬਾਈਲ ਤੇ 1 ਤੱਕ। `auto-fit` + `minmax` Grid ਦੇ ਸਭ ਤੋਂ ਪਿਆਰੇ ਪੈਟਰਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ।

## ਸੈੱਲਾਂ ਵਿੱਚ ਵਸਤੂਆਂ ਨੂੰ ਰੱਖਣਾ

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

ਵਸਤੂਆਂ ਕਈ ਪੰਕਤੀਆਂ/ਕਾਲਮਾਂ ਵਿੱਚ ਫੈਲ ਸਕਦੀਆਂ ਹਨ, ਜੋ ਮੈਗਜ਼ੀਨ-ਸ਼ੈਲੀ ਦੇ ਲੇਆਉਟਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦੀਆਂ ਹਨ ਜੋ Flexbox ਦੇ ਨਾਲ ਮੁਸ਼ਕਲ ਹਨ।

## Grid ਬਨਾਮ Flexbox

- **Grid** — 2D ਲੇਆਉਟ (ਪੰਕਤੀਆਂ *ਅਤੇ* ਕਾਲਮ): ਪੰਨਾ ਲੇਆਉਟ, ਕਾਰਡ ਗਰਿਡ, ਡੈਸ਼ਬੋਰਡ।
- **Flexbox** — 1D ਲੇਆਉਟ (ਇੱਕ ਪੰਕਤੀ ਜਾਂ ਕਾਲਮ): ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ, ਬਟਨ ਗਰੁੱਪ, ਕੇਂਦਰੀਕਰਨ।

ਉਹ ਚੰਗੀ ਤਰ੍ਹਾਂ ਆਪਸ ਵਿੱਚ ਮਿਲਦੇ ਹਨ — ਇੱਕ ਗਰਿਡ ਸੈੱਲ ਆਪ ਸਮ ਇੱਕ ਫਲੈਕਸ ਕਨਟੇਨਰ ਹੋ ਸਕਦਾ ਹੈ।

## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰਖਦਾ ਹੈ

Grid ਸਭ ਤੋਂ ਸ਼ਕਤੀਸ਼ਾਲੀ CSS ਲੇਆਉਟ ਟੂਲ ਹੈ — ਇਹ ਪੂਰੇ-ਪੰਨਾ ਲੇਆਉਟਾਂ ਅਤੇ ਜਵਾਬੀ ਕਾਰਡ ਗਰਿਡਾਂ ਨੂੰ ਸਾਫ-ਸੁਥਰੇ ਤਰੀਕੇ ਨਾਲ ਸੰਭਾਲਦਾ ਹੈ, ਅਕਸਰ ਨੈਸਟਿਡ-div ਹੈਕਾਂ ਨੂੰ ਬਦਲਦਾ ਹੈ।

`auto-fit`/`minmax` ਜਵਾਬੀ ਪੈਟਰਨ ਲੋਕ ਨੂੰ ਬਹੁਤ ਸਾਰੀ ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਦੀ ਲੋੜ ਨੂੰ ਹਟਾ ਦਿੰਦਾ ਹੈ।