Πώς δημιουργείτε ένα layout με CSS Grid;

Question

Accepted Answer

**CSS Grid** είναι ένα δισδιάστατο σύστημα διάταξης — ελέγχει **σειρές και στήλες ταυτόχρονα**, σε αντίθεση με τη μονή σειρά του Flexbox. Ορίζετε ένα grid στο container και τοποθετείτε στοιχεία σε αυτό.

```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` ("κλάσμα") διανέμει το διαθέσιμο χώρο — `1fr 2fr` το χωρίζει 1:2. `repeat(3, 1fr)` είναι σύντομη μορφή για τρεις ίσες διαδρομές.

## Ευαίσθητο grid ΧΩΡΙΣ media queries

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

Αυτή η μία γραμμή δημιουργεί ένα πλήρως ευαίσθητο grid καρτών: κάθε στήλη είναι τουλάχιστον `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 vs Flexbox

- **Grid** — 2D διάταξη (σειρές *και* στήλες): διατάξεις σελίδας, grids καρτών, dashboards.
- **Flexbox** — 1D διάταξη (μία σειρά ή στήλη): γραμμές πλοήγησης, ομάδες κουμπιών, κεντράρισμα.

Συνθέτουν καλά — ένα κελί grid μπορεί να είναι από μόνο του flex container.

## Γιατί έχει σημασία

Το Grid είναι το πιο ισχυρό εργαλείο CSS layout — χειρίζεται διατάξεις πλήρους σελίδας και ευαίσθητα grids καρτών καθαρά, συχνά αντικαθιστώντας τα tricks ένθετων divs.

Μόνο το `auto-fit`/`minmax` ευαίσθητο μοτίβο αφαιρεί την ανάγκη για πολλές media queries.