Rumah > Soal Jawab > teks badan
P粉7104789902023-08-29 09:06:26
Anda boleh menggunakan grid-column
和grid-row
的两个值start / end
sintaks untuk menentukan di mana projek anda bermula dan berakhir.
Sebagai contoh, grid-row: 2 / span 3;
akan bermula pada garisan grid ke-2 dan menjangkau 3 garisan grid sehingga garisan grid ke-5.
.container { display: grid; grid-template-columns: repeat(14, 1fr); grid-template-rows: repeat(6, 1fr); grid-gap: 8px; width: 200px; background: blue; } .item { background-color: red; color: white; } .item-1 { grid-column: span 5; grid-row: span 6; } .item-2 { grid-column: 6 / span 4; grid-row: 2 / span 5; } .item-3 { grid-column: 10 / span 3; grid-row: 3 / span 4; }
<div class="container"> <div class="item item-1">Item 1</div> <div class="item item-2">Item 2</div> <div class="item item-3">Item 3</div> </div>