我需要使用 CSS 網(wǎng)格重現(xiàn)此設(shè)計(jì),並且我嘗試定位特定的網(wǎng)格元素以獲得結(jié)果,但沒(méi)有成功。
這就是我目前所擁有的,我需要修復(fù)一些東西,但我想在之前得到正確的結(jié)構(gòu)。
附上程式碼片段:
.grid-container { display: grid; grid-template-columns: repeat(13, minmax(30px, auto)); gap: 30px; } .grid-item { background-color: red; height: 50px; width: 50px; }
<div class="grid-container"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> </div>
我已經(jīng)嘗試使用 grid-template-rows
來(lái)修改佈局,但沒(méi)有成功,有什麼建議嗎?