Ένθετα CSS Grids

Στο grid system υπάρχει η δυνατότητα να προσθέσετε ένα νέο ένθετο grid στο δικό σας δημιουργημένο πλέγμα. Τα ένθετα grids χρησιμοποιούνται ευρέως για την τοποθέτηση μικρών στοιχείων μέσα σε μπλοκ ιστοτόπου. Για να αξιοποιήσετε αυτή τη δυνατότητα, πρέπει στο ίδιο το θυγατρικό στοιχείο να ορίσετε την ιδιότητα display με την τιμή grid.

Για παράδειγμα, ας δημιουργήσουμε ένα ακόμη grid μέσα σε ένα από τα κελιά του grid:

<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: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
}
#elem4 > div {
	grid-gap: 5px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

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

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

Δημιουργήστε στο πρώτο και τρίτο στοιχείο ένα ένθετο grid με τρία θυγατρικά στοιχεία το καθένα.