试图构建这个CSS网格

时间:2018-04-03 17:52:17

标签: css css3 grid offset css-grid

我成功创建了网格,CSS显示:grid;财产,像这样:

1 2
3 4
5 6

但我正在努力创建偏移量,如下所示:

http://share.activ.is/Yjy8xZ

任何?

1 个答案:

答案 0 :(得分:0)

以下是代码:

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  padding: 10px;
}

.grid-item:nth-child(2n) {
  border: 2px dashed red;
  margin-top: 10px;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>