CSS Grid'de Sütun Çakışması
Birkaç öğenin aynı sütunu kapladığı durumlarda, her bir sonraki öğenin bir satır aşağı kaydığı bir çakışma gözlemlenebilir.
Şimdi grid'imizde ilk öğenin ilk satırda, ikincinin ikinci satırda, üçüncü ve dördüncünün ise üçüncü satırda yer almasını sağlayalım:
<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;
}
:
Aşağıdaki örneği gerçekleştirin:
Aşağıdaki örneği gerçekleştirin:
Aşağıdaki örneği gerçekleştirin:
