Άυλα Πλέγματα στο CSS

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

Ας υποθέσουμε ότι έχουμε τέσσερα μπλοκ:

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

Ας υποθέσουμε ότι το πλέγμα μας έχει διαστάσεις 3 επί 3:

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
}

Ας τοποθετήσουμε τα τρία μπλοκ μας στο πλέγμα:

#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}

Και ας τοποθετήσουμε το τέταρτο μπλοκ στην τέταρτη σειρά και στήλη:

#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Δεδομένου ότι το πλέγμα μας έχει μέγεθος 3 επί 3, τέτοια τέταρτη σειρά και στήλη δεν θα υπάρχουν σε αυτό το πλέγμα. Αλλά δεν θα υπάρχουν σε φανερή μορφή, δηλαδή σε αυτή που ορίσαμε. Αλλά το πρόγραμμα περιήγησης θα τις δημιουργήσει άυλα, δηλαδή μόνο του.

Σε αυτή την περίπτωση, εφόσον καθορίσαμε διαστάσεις μόνο για το φανερό πλέγμα, τότε για τα κελιά έξω από αυτό το πλέγμα οι διαστάσεις θα υπολογιστούν από το πρόγραμμα περιήγησης. Δηλαδή στην περίπτωσή μας οι διαστάσεις του τέταρτου μπλοκ θα οριστούν αυτόματα από το πρόγραμμα περιήγησης.

Ας δούμε τι θα πάρουμε:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}
#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Ας υποθέσουμε ότι στο πλέγμα σας υπάρχουν 6 μπλοκ. Τοποθετήστε 3 μπλοκ στο φανερό πλέγμα, και τρία μπλοκ στο άυλο.