Kolonnu pārklāšanās CSS režģos
Situācijā, kad vairāki elementi aizņem to pašu kolonnu, var novērot to pārklāšanos, kurā katrs nākamais elements tiek pārvietots uz nākamo rindu.
Izveidosim mūsu režģī tā, lai pirmais elements atrastos pirmajā rindā, otrais - otrajā, bet trešais un ceturtais - trešajā rindā:
<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;
}
:
Realizējiet šādu piemēru:
Realizējiet šādu piemēru:
Realizējiet šādu piemēru:
