Combinarea coloanelor în grid-urile CSS
În mod similar se pot combina
coloanele folosind proprietatea
grid-column.
Să presupunem că avem un grid cu patru elemente. Acum să facem astfel încât primul, al doilea și al treilea element să se poziționeze pe primul rând. Iar al patrulea element să ocupe întregul al doilea rând:
<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;
}
:
Poziționați toate elementele și combinați coloanele în conformitate cu următorul exemplu:
Poziționați toate elementele și combinați coloanele în conformitate cu următorul exemplu:
Poziționați toate elementele și combinați coloanele în conformitate cu următorul exemplu:
