css-grid：将元素置于网格“外部”

Question

我是CSS网格的新手，我尝试从附加的图像实现布局，其中一个元素DIV 4比网格布局宽。我尝试避免在DIV 4之前关闭grid-div，然后在DIV 4之后再次打开网格，以便我可以控制每个网格元素的外观以及仅通过一个CSS类显示它的方式，并且不需要不同的div结构。

https://codepen.io/anon/pen/RBdjbd

 .grid-2er {
     grid: auto-flow dense / 1fr 1fr;
     display: grid;
     grid-gap: 20px;
     grid-auto-rows: auto;
}

.grid-2er .halfwidth {
     grid-column: 1 / -1;
}

.grid-2er .fullwidth {
     grid-column: 1 / -1;
}

Answer 1

您可以使用负边距。如果整个网格的宽度最大为800px，则每边都可以有(800px - 100vw)/2的负边距。然后，当窗口的大小小于800px时，将边距重置为0：

这里是一个示例（在这种情况下，我使用了600px ）

* {
  margin: 0;
  padding: 0;
  font-weight: 300;
  border: none;
  font-family: "Source Sans Pro", sans-serif;
  text-align: center;
  padding: 10px;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

.grid-2er {
  grid: auto-flow dense / 1fr 1fr;
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: auto;
  max-width: 600px;
  margin: auto;
}

.grid-2er .halfwidth {
  grid-column: 1 / -1;
  background: blue;
  color: white
}

.grid-2er .fullwidth {
  grid-column: 1 / -1;
  background: blue;
  color: white
}

.outside {
  margin: 0 calc((600px - 100vw)/2);
}

@media only screen and (max-width: 600px) {
  .outside {
    margin: 0;
  }
}

@media only screen and (min-width: 480px) {
  .grid-2er .halfwidth {
    grid-column: auto;
  }
  .grid-2er .fullwidth .tile {
    width: 50%;
  }
}

<div class="grid-2er">

  <div class="fullwidth ">
    DIV 1
  </div>

  <div class="halfwidth">
    DIV 2
  </div>

  <div class="halfwidth">
    DIV 3
  </div>

  <div class="fullwidth outside">
    DIV 4
  </div>

  <div class="halfwidth">
    DIV 5
  </div>

  <div class="halfwidth">
    DIV 6
  </div>

</div>

Answer 2

可能我建议使用四个列网格

  grid-template-columns: 1fr minmax(0, 400px) minmax(0, 400px) 1fr;

Codepen Demo

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  outline: none;
  font-weight: 300;
  border: none;
  font-family: "Source Sans Pro", sans-serif;
  text-align: center;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

.grid-2er {
  grid-template-columns: 1fr minmax(0, 400px) minmax(0, 400px) 1fr;
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: auto;
}

.grid-2er * {
  background: blue;
  color: white
}

.grid-2er .mainwidth {
  grid-column: 2 / 4;
}

.grid-2er .halfwidth {
  grid-column: 2;
}

.halfwidth+.halfwidth {
  grid-column: 3;
}

.grid-2er .fullwidth {
  grid-column: 1 / -1;
}

<div class="grid-2er">
  <div class="mainwidth">DIV 1</div>
  <div class="halfwidth">DIV 2</div>
  <div class="halfwidth">DIV 3</div>
  <div class="fullwidth">DIV 4</div>
  <div class="halfwidth">DIV 5</div>
  <div class="halfwidth">DIV 6</div>
</div>