Überlappung von Spalten in CSS Grids
In einer Situation, in der mehrere Elemente dieselbe Spalte einnehmen, kann es zu ihrer Überlappung kommen, wobei jedes nachfolgende Element um eine Zeile nach unten verschoben wird.
Lassen Sie uns in unserem Grid so einrichten, dass das erste Element in der ersten Zeile positioniert wird, das zweite - in der zweiten, und das dritte und vierte - in der dritten Zeile:
<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;
}
:
Setzen Sie das folgende Beispiel um:
Setzen Sie das folgende Beispiel um:
Setzen Sie das folgende Beispiel um:
