css-grid: 放置网格的元素 "outside"

Question

我是 css 网格的新手 我尝试从附加的图像中实现布局，其中 ONE 元素 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

我可以建议一个四列网格

  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>