Εισαγωγή στα CSS Grid

Τα CSS Grid αντιπροσωπεύουν έναν τρόπο τοποθέτησης στοιχείων ταυτόχρονα οριζόντια και κάθετα. Είναι ένας πιο προηγμένος τρόπος σε σύγκριση με τα flex, αλλά πιο σύνθετος στην εκμάθηση.

Για να δημιουργήσετε ένα grid, πρέπει να ορίσετε στην ιδιότητα display του στοιχείου την τιμή grid:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
}

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

Με τη βοήθεια ειδικών ιδιοτήτων μπορούμε να τοποθετούμε στοιχεία τόσο ανά σειρές, όσο και ανά στήλες. Αυτό θα επιτρέψει εύκολα τη δημιουργία, για παράδειγμα, πραγμάτων όπως αυτό:

Στα επόμενα μαθήματα, πρώτα θα μελετήσουμε την τοποθέτηση στοιχείων ανά στήλες, στη συνέχεια θα προχωρήσουμε στη μελέτη των σειρών και μετά θα τα συνδυάσουμε όλα μαζί.