我需要使用 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)有成功,有什么建議嗎?
.grid-container { display: grid; grid-template-columns: repeat(13, minmax(30px, auto)); grid-template-rows: repeat(5, minmax(30px, auto)); gap: 10px; } .grid-item { background-color: red; height: 50px; width: 50px; } .div1 { grid-area: 1 / 1 / 4 / 2; height: 100%; } .div38 { grid-area: 4 / 1 / 6 / 2; height: 100%; } .div39 { grid-area: 4 / 2 / 5 / 6; width: 100%; } .div40 { grid-area: 4 / 6 / 5 / 10; width: 100%; } .div41 { grid-area: 4 / 10 / 5 / 14; width: 100%; } .div42 { grid-area: 5 / 2 / 6 / 4; width: 100%; } .div43 { grid-area: 5 / 4 / 6 / 6; width: 100%; } .div44 { grid-area: 5 / 6 / 6 / 8; width: 100%; } .div45 { grid-area: 5 / 8 / 6 / 10; width: 100%; } .div46 { grid-area: 5 / 10 / 6 / 12; width: 100%; } .div47 { grid-area: 5 / 12 / 6 / 14; width: 100%; }
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)