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

Question

我是 css 网格新手，我尝试从所附图像实现布局，其中 ONE element DIV 4 比网格布局宽。我尽量避免在 DIV 4 之前关闭 grid-div，然后在 DIV 4 之后再次重新打开网格，这样我就可以控制每个网格元素的外观以及它如何仅通过一个 css-class 显示，并且不需要不同的 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 演示

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

* {
  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;
}