css - 我如何使用新的 CSS GRID 布局创建一个类似 12 列(仅网格)网格系统的 Bootstrap

Question

如何使用新的 CSS GRID 技术创建类似 bootstrap 的 12 列网格？任何人都可以给我演示如何操作吗？我真的对这项新技术感到困惑。我想使用 CSS 网格制作一个简单的 12 列网格状 Bootstrap 。我的方法应该是什么？

Answer 1

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

您需要定义一个 12 列的网格并设置类以跨越这么多行和这么多列，因此与 Bootstrap 类一样，您可以在一行的第 1 位到第 12 位内调整元素的大小，但是，与 Bootstrap 不同，它还允许您跨行跨越元素而无需额外的标记/提示:

示例: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/