html - css网格布局实践

Question

我是 CSS 网格的新手，我想练习一下我要制作

,

但是我的第二个和第三个 div 没有正确定位

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr)
  grid-auto-rows: 100px;
  grid-gap: 1em;
}

.grid-wrapper > div img {
  width: 100%;
  height: 100%;
}

.grid-wrapper > div:nth-child(1) {
  grid-column: 1/4;
}

.grid-wrapper > div:nth-child(2) {
  grid-row: 1/2;
  grid-column: 4/5;
}

.grid-wrapper > div:nth-child(3) {
  grid-row: 2/3;
  grid-column: 4/5;
}

<div class="grid-wrapper">
  <div><img src="https://placehold.co/200x150/1aacff/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/f700ff/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff5500/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff0059/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/00ff2f/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff2efc/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/001191/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/1aacff/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff5500/FFFFFF?text=Hello+World&font=raleway" /></div>
</div>

结果如下:

如何解决？

Answer 1

主要变化:

.grid - wrapper > div: nth - child(1) {
    grid - column: 1 / 4;
    grid - row: 1 / 3;    // added row position 1 / 3;
  }
  .grid - wrapper > div: nth - child(2) {
    grid - row: 1 / 2;
    grid - column: 4 / 6; // updated 4/5 > 4/6
  }
  .grid - wrapper > div: nth - child(3) {
    grid - row: 2 / 3;
    grid - column: 4 / 6; // updated 4/5 > 4/6
  }

.grid-wrapper {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(4, 1fr); // forgot to add semi colon at the end
      grid-auto-rows: 100px;
      grid-gap: 1em;
    }

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 1em;
}

.grid-wrapper>div img {
  width: 100%;
  height: 100%;
}

.grid-wrapper>div:nth-child(1) {
  grid-column: 1/4;
  grid-row: 1/3;
}

.grid-wrapper>div:nth-child(2) {
  grid-row: 1/2;
  grid-column: 4/6;
}

.grid-wrapper>div:nth-child(3) {
  grid-row: 2/3;
  grid-column: 4/6;
}

<div class="grid-wrapper">
  <div><img src="https://placehold.co/200x150/1aacff/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/f700ff/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff5500/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff0059/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/00ff2f/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff2efc/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/001191/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/1aacff/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff5500/FFFFFF?text=Hello+World&font=raleway" /></div>
</div>

建议:使用 Firefox 开发者工具检查 GRID CSS

网格检查器允许您使用 Firefox DevTools 检查 CSS 网格布局，发现页面上存在的网格，检查和修改它们，调试布局问题，