Συγχώνευση στηλών σε CSS πλέγματα
Με παρόμοιο τρόπο μπορείτε να συγχωνεύετε
στήλες χρησιμοποιώντας την ιδιότητα
grid-column.
Ας υποθέσουμε ότι έχουμε ένα πλέγμα με τέσσερα στοιχεία. Τώρα ας κάνουμε έτσι ώστε το πρώτο, δεύτερο και τρίτο στοιχείο να βρίσκονται στην πρώτη σειρά. Και το τέταρτο στοιχείο να καταλαμβάνει ολόκληρη τη δεύτερη σειρά:
<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;
padding: 10px;
border: 2px solid #696989;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column: 1 / 2;
}
#elem2 {
grid-column: 2 / 3;
}
#elem3 {
grid-column: 3 / 4;
}
#elem4 {
grid-column: 1 / 4;
}
:
Τοποθετήστε όλα τα στοιχεία και συγχωνεύστε τις στήλες σύμφωνα με το ακόλουθο παράδειγμα:
Τοποθετήστε όλα τα στοιχεία και συγχωνεύστε τις στήλες σύμφωνα με το ακόλουθο παράδειγμα:
Τοποθετήστε όλα τα στοιχεία και συγχωνεύστε τις στήλες σύμφωνα με το ακόλουθο παράδειγμα:
