CSS网格项目宽度大于父框架

Question

我需要实现比网格框架更宽的网格项目。 但是，以标准方式看来这是不可能的。 有什么想法吗？

.grid {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

.grid-item {
    position: absolute;
    width: 300px;
}

Answer 1

正如您所说，该项目已经更宽了其网格盒。无需添加绝对位置。为了更好地理解正在进行的网格时，它建议使用Firefox，因为它可以帮助您可视化每个网格线。

.grid {
  display: grid;
  background-color: red;
  grid-template-columns: 200px 200px 200px;
}

.grid-item1 {
  background-color: blue;
  width: 300px;
  height: 300px;
}
.grid-item2 {
  background-color: green;
  width: 300px;
  height: 300px;
}
.grid-item3 {
  background-color: yellow;
  width: 300px;
  height: 300px;
}

        <div class="grid">
            <div class="grid-item1"></div>
            <div class="grid-item2"></div>
            <div class="grid-item3"></div>
        </div>

Answer 2

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.container {
  width: 50vw;
  height: 50vh;
  border: 1px solid red;
}

.grid {
  width: 70vw;
  height: 70vh;
  margin: -10vh -10vw -10vh -10vw;
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 10vw);
  grid-template-rows: repeat(7, 10vh);
}

.c {
  grid-column: 4 / -4;
  grid-row: 4 / -4;
}

.n {
  grid-column: 4 / -4;
  grid-row: 1 / 2;
}

.s {
  grid-column: 4 / -4;
  grid-row: -2 / -1;
}

.e {
  grid-column: -2 / -1;
  grid-row: 4 / -4;
}

.w {
  grid-column: 1 / 2;
  grid-row: 4 / -4;
}

.ne {
  grid-column: -2 / -1;
  grid-row: 1 / 2;
}

.se {
  grid-column: -2 / -1;
  grid-row: -2 / -1;
}

.nw {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.sw {
  grid-column: 1 / 2;
  grid-row: -2 / -1;
}

.c,
.n,
.s,
.e,
.w,
.ne,
.nw,
.se,
.sw {
  border: 1px solid #000;
}

<div class="container">
  <div class="grid">
    <div class="c"></div>
    <div class="n"></div>
    <div class="ne"></div>
    <div class="e"></div>
    <div class="se"></div>
    <div class="s"></div>
    <div class="sw"></div>
    <div class="w"></div>
    <div class="nw"></div>
  </div>
</div>