Преклопување на колони во CSS гридови
Во ситуација кога неколку елементи заземаат иста колона може да се забележи нивно преклопување, при што секој следен елемент се поместува на следниот ред.
Ајде во нашиот грид да направиме така што првиот елемент да се позиционира во првиот ред, вториот - во вториот, а третиот и четвртиот - во третиот ред:
<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;
}
:
Имплементирајте го следниот пример:
Имплементирајте го следниот пример:
Имплементирајте го следниот пример:
