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

jsFiddle