Επικάλυψη Στηλών σε CSS Grids
Σε μια κατάσταση όπου πολλά στοιχεία καταλαμβάνουν την ίδια στήλη, μπορεί να παρατηρηθεί επικάλυψή τους, όπου κάθε επόμενο στοιχείο μετατοπίζεται σε μια χαμηλότερη σειρά.
Ας κάνουμε στο grid μας έτσι ώστε το πρώτο στοιχείο να τοποθετηθεί στην πρώτη σειρά, το δεύτερο - στη δεύτερη, και το τρίτο και τέταρτο - στην τρίτη σειρά:
<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 / 4;
}
#elem2 {
grid-column: 2 / 3;
}
#elem3 {
grid-column: 1 / 2;
}
#elem4 {
grid-column: 3 / 4;
}
:
Υλοποιήστε το ακόλουθο παράδειγμα:
Υλοποιήστε το ακόλουθο παράδειγμα:
Υλοποιήστε το ακόλουθο παράδειγμα:
