css 3 grid-如何对齐图像？

Question

我正在尝试使用 CSS 3 Grid 使用我导入的图像对我的主页进行一些特定的放置。这就是我想要实现的目标：

这就是我目前网格上的内容：

这是我的代码：

<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;

}

如何排列图像，使其与预期结果完全一致？

Answer 1

更新我删除了800px/600px明确的高度，网格默认填充整个屏幕。为简单起见，我拉伸了所有图像以填充整个网格单元。需要注意的是grid-row和grid-column值是如何运作的。通过指定每个网格单元应跨越多远，高度和宽度自然分布在整个网格中。对于这个例子，我将网格设置为800px宽和600px高。我使用fr网格规则的单位，因此它们将根据与其他孩子的关系相对分布。下面一行告诉浏览器将网格设置为 8 个单位长。第一列将是总宽度的 3/8（800px在本例中）。第二列看起来比其他列窄，所以我做到了2fr。grid-template-columns:&nbsp;3fr&nbsp;2fr&nbsp;3fr;-1当您在网格子测量中看到 a 时，本质上意味着转到末尾。例如，以下代码片段表示从第 3 行开始并跨越到末尾，无论有多少行。grid-row:&nbsp;3&nbsp;/&nbsp;-1;演示.wrapper {&nbsp; display: grid;&nbsp; grid-template-columns: 3fr 2fr 3fr;&nbsp; grid-template-rows: repeat(8, 1fr);&nbsp; padding: 1em;&nbsp; grid-gap: 0.5em;&nbsp; background-color: #eee;}.wrapper>div {&nbsp; position: relative;}.wrapper>div::after {&nbsp; position: absolute;&nbsp; transform: translate(-50%, -50%);&nbsp; top: 50%;&nbsp; left: 50%;&nbsp; background-color: #333;&nbsp; color: white;&nbsp; padding: .5rem;}.bed {&nbsp; grid-column: 1;&nbsp; grid-row: 1 / 3;}.bed::after {&nbsp; content: 'BED';}.pillow {&nbsp; grid-column: 2;&nbsp; grid-row: 1 / 3;}.pillow::after {&nbsp; content: 'PILLOW';}.kitchen {&nbsp; grid-column: 3;&nbsp; grid-row: 2 / 5;}.kitchen::after {&nbsp; content: 'KITCHEN';}.living-room {&nbsp; grid-column: 1 / 3;&nbsp; grid-row: 3 / -1;}.living-room::after {&nbsp; content: 'LIVING ROOM';}.sofa {&nbsp; grid-column-start: 3;&nbsp; grid-row: 5 / -1;}.sofa::after {&nbsp; content: 'SOFA';}img {&nbsp; width: 100%;&nbsp; height: 100%;}<div class="wrapper">&nbsp; <div class="bed"><img src="http://placehold.it/300x300" alt=""></div>&nbsp; <div class="pillow"><img src="http://placehold.it/300x300" alt=""></div>&nbsp; <div class="kitchen"><img src="http://placehold.it/300x300" alt=""></div>&nbsp; <div class="living-room"><img src="http://placehold.it/300x300" alt=""></div>&nbsp; <div class="sofa"><img src="http://placehold.it/300x300" alt=""></div></div>jsFiddle