Διαστάσεις των Άυλων Πλεγμάτων στο CSS
Το άυλο πλέγμα καθορίζει αυτόματα τα μεγέθη των στοιχείων
που βγαίνουν έξω από τα όριά του. Ωστόσο, αν
χρειαστεί, αυτά τα μεγέθη μπορούν να οριστούν χρησιμοποιώντας
τις ιδιότητες grid-auto-columns και
grid-auto-rows.
Ας το κάνουμε:
<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-auto-columns: 100px;
grid-auto-rows: 100px;
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;
}
:
Ας υποθέσουμε ότι έχετε 9 μπλοκ στο πλέγμα σας.
Τοποθετήστε μερικά μπλοκ στο ρητό
πλέγμα και μερικά στο άυλο πλέγμα.
Ορίστε τα μεγέθη για τα μπλοκ στο άυλο μέρος.
