Υποπλέγματα στο CSS

Το υποπλέγμα είναι μια παραλλαγή του ένθετου πλέγματος, αλλά σε αντίθεση με αυτό, επηρεάζει το μέγεθος του γονικού πλέγματος-εμπορευματοκιβωτίου. Για να ορίσετε ένα υποπλέγμα, πρέπει στο ίδιο το θυγατρικό στοιχείο να ορίσετε την ιδιότητα display με την τιμή subgrid.

Για παράδειγμα, ας δημιουργήσουμε στο τέταρτο στοιχείο ένα ένθετο πλέγμα:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
	</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr / 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem4 {
	display: subgrid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 5px;
}
#elem4 > div {
	grid-gap: 5px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

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

Τροποποιήστε το προηγούμενο πρόβλημα έτσι, ώστε στο ένθετο πλέγμα να υπάρχουν τέσσερα θυγατρικά στοιχεία.

Δημιουργήστε δύο ένθετα πλέγματα - στο δεύτερο στοιχείο και στο πέμπτο στοιχείο.