我正在嘗試使用 CSS 3 Grid 使用我導(dǎo)入的圖像對我的主頁進(jìn)行一些特定的放置。這就是我想要實(shí)現(xiàn)的目標(biāo)：這就是我目前網(wǎng)格上的內(nèi)容：這是我的代碼：<div class="wrapper"> <div class="bed"><img src="http://placehold.it/300x300" alt=""></div> <div class="pillow"><img src="http://placehold.it/300x300" alt=""></div> <div class="kitchen"><img src="http://placehold.it/300x300" alt=""></div> <div class="living-room"><img src="http://placehold.it/300x300" alt=""></div> <div class="sofa"><img src="http://placehold.it/300x300" alt=""></div></div>@endsection@push('style')<style>.wrapper{ display: grid; grid-template-columns: 1fr 0.5fr 1fr ; grid-auto-rows: minmax(100px,auto); padding: 1em;}.wrapper >div{padding: 1em;}.bed{ height: 50%;}.pillow{ height: 50%; width:100%;}.kitchen{ height: 50%;}.living-room{ height: 70%; width:150%;}.sofa{ height: 50%; width:150%;}img{ width:100%; height: 100%; border-radius: 20px;}如何排列圖像，使其與預(yù)期結(jié)果完全一致？
1 回答
慕尼黑8549860
TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超11個贊
更新
我刪除了800px/600px明確的高度，網(wǎng)格默認(rèn)填充整個屏幕。
為簡單起見，我拉伸了所有圖像以填充整個網(wǎng)格單元。需要注意的是grid-row和grid-column值是如何運(yùn)作的。通過指定每個網(wǎng)格單元應(yīng)跨越多遠(yuǎn)，高度和寬度自然分布在整個網(wǎng)格中。對于這個例子，我將網(wǎng)格設(shè)置為800px寬和600px高。
我使用fr網(wǎng)格規(guī)則的單位，因此它們將根據(jù)與其他孩子的關(guān)系相對分布。下面一行告訴瀏覽器將網(wǎng)格設(shè)置為 8 個單位長。第一列將是總寬度的 3/8（800px在本例中）。第二列看起來比其他列窄，所以我做到了2fr。
grid-template-columns: 3fr 2fr 3fr;
-1當(dāng)您在網(wǎng)格子測量中看到 a 時，本質(zhì)上意味著轉(zhuǎn)到末尾。例如，以下代碼片段表示從第 3 行開始并跨越到末尾，無論有多少行。
grid-row: 3 / -1;
演示
.wrapper {
display: grid;
grid-template-columns: 3fr 2fr 3fr;
grid-template-rows: repeat(8, 1fr);
padding: 1em;
grid-gap: 0.5em;
background-color: #eee;
}
.wrapper>div {
position: relative;
}
.wrapper>div::after {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background-color: #333;
color: white;
padding: .5rem;
}
.bed {
grid-column: 1;
grid-row: 1 / 3;
}
.bed::after {
content: 'BED';
}
.pillow {
grid-column: 2;
grid-row: 1 / 3;
}
.pillow::after {
content: 'PILLOW';
}
.kitchen {
grid-column: 3;
grid-row: 2 / 5;
}
.kitchen::after {
content: 'KITCHEN';
}
.living-room {
grid-column: 1 / 3;
grid-row: 3 / -1;
}
.living-room::after {
content: 'LIVING ROOM';
}
.sofa {
grid-column-start: 3;
grid-row: 5 / -1;
}
.sofa::after {
content: 'SOFA';
}
img {
width: 100%;
height: 100%;
}
<div class="wrapper">
<div class="bed"><img src="http://placehold.it/300x300" alt=""></div>
<div class="pillow"><img src="http://placehold.it/300x300" alt=""></div>
<div class="kitchen"><img src="http://placehold.it/300x300" alt=""></div>
<div class="living-room"><img src="http://placehold.it/300x300" alt=""></div>
<div class="sofa"><img src="http://placehold.it/300x300" alt=""></div>
</div>
- 1 回答
- 0 關(guān)注
- 106 瀏覽
添加回答
舉報
0/150
提交
取消