如何使用新的 CSS GRID 布局创建类似 12 列（仅网格）网格系统的 Bootstrap

Question

如何使用新的 CSS GRID 技术创建类似引导程序的 12 列网格？谁能告诉我一个演示如何做到这一点？我真的对这项新技术感到困惑。我想使用 CSS 网格制作一个简单的 12 列网格状引导程序。我的方法应该是什么？

Answer 1

display:grid; 允许您创建列和行。

您需要定义一个 12 列的网格并设置类以跨越如此多的行和如此多的列，因此与引导类类似，您可以将元素的大小调整为行的第 1 位到第 12 位，但是，与引导程序不同的是，它允许您还可以跨行跨越元素而无需额外的标记/嵌合：

示例：https : //codepen.io/gc-nomade/pen/RLjdrM

.grid {
  margin: 1em;
  border: solid lightgray;
  background: lightgray;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 2px;
  counter-reset: div;
}

.grid div {
  border: solid;
  text-align: center;
}

.grid div:before {
  counter-increment: div;
  content: 'N°' counter(div);
}

.grid div[class]:after {
  display: block;
  text-align: center;
  background: lightblue;
  content: "Class applied : "attr(class);
  color: crimson;
}


/* spanning cols, complete values missing */

.col-2 {
  grid-column: auto/span 2;
}

.col-3 {
  grid-column: auto/span 3;
}

.col-6 {
  grid-column: auto/span 6;
}

.col-8 {
  grid-column: auto/span 8;
}


/* spanning rows , complete values missing*/

.row-2 {
  grid-row: auto/span 2;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid">
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-6"></div>
  <div class="col-6"></div>
  <div class="col-2 row-2"></div>
  <div class="col-8"></div>
  <div class="col-2 row-2"></div>
  <div class="col-3"></div>
  <div class="col-2"></div>
  <div class="col-3"></div>
</div>

这是开始使用 CSS 网格布局的 2 个有用链接：

https://css-tricks.com/snippets/css/complete-guide-grid/

https://gridbyexample.com/examples/