Τι είναι το CSS Grid;

Η διάταξη πλέγματος CSS (ή απλά CSS Grid) είναι ένα σύστημα διπλής διάστασης διάταξης στο CSS. Επιτρέπει τον έλεγχο της τοποθέτησης των στοιχείων τόσο σε γραμμές (οριζόντια), όσο και σε στήλες (κατακόρυφα), δημιουργώντας πολύπλοκες δομές δικτύου για την κατασκευή διεπαφών.

Οι βασικές έννοιες του CSS Grid περιλαμβάνουν:

Κάδος Πλέγματος: Το στοιχείο στο οποίο εφαρμόζεται η ιδιότητα display: grid ή display: inline-grid. Οι απόγονοί του γίνονται στοιχεία πλέγματος.
Στοιχεία Πλέγματος: Οι άμεσοι απόγονοι του Κάδου Πλέγματος.
Γραμμές Πλέγματος: Διαχωριστικές γραμμές που σχηματίζουν το πλέγμα. Μπορούν να ονομάζονται ή να έχουν αριθμητικό δείκτη.
Τραβέρσες Πλέγματος: Ο χώρος μεταξύ δύο γραμμών του πλέγματος — αυτό μπορεί να είναι μια στήλη ή μια γραμμή.
Κελιά Πλέγματος: Η μικρότερη μονάδα του πλέγματος, που σχηματίζεται από τη διασταύρωση μιας γραμμής και μιας στήλης.
Περιοχές Πλέγματος: Μια ορθογώνια περιοχή του πλέγματος που καταλαμβάνει ένα ή περισσότερα κελιά.

Οι βασικές ιδιότητες για εργασία με το CSS Grid περιλαμβάνουν:

Για τον κάδο:

display: grid | inline-grid;
grid-template-columns: Ορίζει τις στήλες του πλέγματος.
grid-template-rows: Ορίζει τις γραμμές του πλέγματος.
grid-template-areas: Ορίζει τις ονομασμένες περιοχές του πλέγματος.
gap | row-gap | column-gap: Ορίζει τα κενά μεταξύ των κελιών.
justify-items | align-items | place-items: Ευθυγράμμιση του περιεχομένου μέσα στα κελιά κατά μήκος των κύριων και διασταυρούμενων αξόνων.
justify-content | align-content | place-content: Ευθυγράμμιση των γραμμών του πλέγματος μέσα στον κάδο.

Για τα στοιχεία (Στοιχεία Πλέγματος):

grid-column-start | grid-column-end | grid-column: Ορίζει ποιες γραμμές στήλης καταλαμβάνει το στοιχείο.
grid-row-start | grid-row-end | grid-row: Ορίζει ποιες γραμμές σειράς καταλαμβάνει το στοιχείο.
grid-area: Αναθέτει στο στοιχείο μια ονομασμένη περιοχή πλέγματος ή καθορίζει τη θέση του με γραμμές.
justify-self | align-self | place-self: Ευθυγράμμιση του ίδιου του στοιχείου μέσα στο κελί του.

Το CSS Grid παρέχει ισχυρά εργαλεία για τη δημιουργία ανταποκρινόμενων και πολύπλοκων διατάξεων, απλοποιώντας σημαντικά τις εργασίες που προηγουμένως απαιτούσαν τη χρήση float, inline-block ή απόλυτης τοποθέτησης.

.container {
  display: grid; /* Κάνει το στοιχείο ένα κοντέινερ πλέγματος */
  grid-template-columns: 1fr 1fr 1fr; /* Δημιουργεί 3 στήλες ίσου πλάτους */
  grid-template-rows: auto auto; /* Δημιουργεί 2 γραμμές με αυτόματο ύψος */
  gap: 10px; /* Προσθέτει κενά μεταξύ των κελιών */
}

.item {
  /* Τα στοιχεία μέσα στο κοντέινερ γίνονται αυτόματα στοιχεία πλέγματος */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Το πρώτο στοιχείο καταλαμβάνει τις στήλες 1 έως 3 */
}