1 回答

TA貢獻1818條經驗 獲得超11個贊
更新
我刪除了800px/600px
明確的高度,網格默認填充整個屏幕。
為簡單起見,我拉伸了所有圖像以填充整個網格單元。需要注意的是grid-row
和grid-column
值是如何運作的。通過指定每個網格單元應跨越多遠,高度和寬度自然分布在整個網格中。對于這個例子,我將網格設置為800px
寬和600px
高。
我使用fr
網格規則的單位,因此它們將根據與其他孩子的關系相對分布。下面一行告訴瀏覽器將網格設置為 8 個單位長。第一列將是總寬度的 3/8(800px
在本例中)。第二列看起來比其他列窄,所以我做到了2fr
。
grid-template-columns: 3fr 2fr 3fr;
-1
當您在網格子測量中看到 a 時,本質上意味著轉到末尾。例如,以下代碼片段表示從第 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 關注
- 95 瀏覽
添加回答
舉報