我只是想知道布局專案的最佳方式是什么，以便我可以獲得附件中顯示的相同結果，或者這背后的技巧是什么。
uj5u.com熱心網友回復：
我發現 CSS Grid 對于這種型別的 x/y 方向布局來說是最直觀的。使用
我們能做的：
.pics {
display: grid;
grid-template-columns: repeat(27, 1fr);
grid-template-rows: repeat(27, 1fr);
gap: 2vmin;
width: 50vmin;
aspect-ratio: 1 / 1;
}
.pics>div {
width: 100%;
height: 100%;
border-radius: 2vmin;
}
.pics>*:nth-child(1) {
background: magenta;
grid-column: 1 / span 14;
grid-row: 5 / span 14;
}
.pics>*:nth-child(2) {
background: cyan;
grid-column: 15 / span 12;
grid-row: 1 / span 12;
}
.pics>*:nth-child(3) {
background: yellow;
grid-column: 15 / span 13;
grid-row: 13 / span 13;
}<div class="pics">
<div>1</div>
<div>2</div>
<div>3</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/468657.html
上一篇：jQuery：如何清空具有相同屬性值但保留第一個添加的td的內容的知名表tds內容
下一篇：重疊兩個盒子