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

Question

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

Answer 1

它会像这样：

.wrapper {
  display: grid;

}
.one {
  grid-column: 1 ;
  grid-row: 1;
}
.two { 
  grid-column: 2;
  grid-row: 1 ;
}
.three {
  grid-column: 3;
  grid-row: 1 ;
}
.four {
  grid-column: 4;
  grid-row: 1;
}
.five {
  grid-column: 5;
  grid-row: 1;
}
.six {
  grid-column: 6;
  grid-row: 1;
}
.seven {
  grid-column: 7;
  grid-row: 1;
}
.eight {
  grid-column: 8;
  grid-row: 1;
}
.nine {
  grid-column: 9;
  grid-row: 1;
}
.ten {
  grid-column: 10;
  grid-row: 1;
}
.eleven {
  grid-column: 11;
  grid-row: 1;
}
.twelve {
  grid-column: 12;
  grid-row: 1;
}

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
  <div class="seven">Seven</div>
  <div class="eight">Eight</div>
  <div class="nine">Nine</div>
  <div class="ten">Ten</div>
  <div class="eleven">Eleven</div>
  <div class="twelve">Twelve</div>
</div>

请记住，网格有一个 "grid-row"，因此它不会像 Bootstrap 那样使用此特定代码进行换行。如果您需要查看更多详细信息，我引用了 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout。

Answer 2

其实很简单：定义 13 条彼此距离相同的垂直线。因为一个总是（并且必须）在那里，你只需要创建 12 行，并且与之前的行有一定的相对距离）就像这样：

/* actual grid code */
.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* This creates 12 equally width columns */
  /* Note that one line (the outer left one) is always there → only 12 have to be created */
}


/* For this demo only */
html, body {
  height: 100%;
  width: 100%;
}

.showcase {
  border: 1px solid black;
}

.r1 {grid-column: 1 / 2}
.r2 {grid-column: 2 / 3}
.r3 {grid-column: 3 / 4}
.r4 {grid-column: 4 / 5}
.r5 {grid-column: 5 / 6}
.r6 {grid-column: 6 / 7}
.r7 {grid-column: 7 / 8}
.r8 {grid-column: 8 / 9}
.r9 {grid-column: 9 / 10}
.r10 {grid-column: 10/ 11}
.r11 {grid-column: 11/ 12}
.r12 {grid-column: 12/ 13}

<div class="wrapper" style="height: 100%; width: 100%;">
  <!-- You can change the width and hight here. Bootstrap uses a max-width to make it look better on bigger screens -->
  
  <div class="showcase r1">1</div>
  <div class="showcase r2">2</div>
  <div class="showcase r3">3</div>
  <div class="showcase r4">4</div>
  <div class="showcase r5">5</div>
  <div class="showcase r6">6</div>
  <div class="showcase r7">7</div>
  <div class="showcase r8">8</div>
  <div class="showcase r9">9</div>
  <div class="showcase r10">10</div>
  <div class="showcase r11">11</div>
  <div class="showcase r12">12</div>
  
</div>

但是请注意，css 网格比 bootstrap 网格强大得多，因此请务必充分利用它。 F.e。 grid-template-area 真的很有用。正如命名 columns/rows 一样。（当然，添加行本身也很强大）

你可以在这里找到一个不错的overview/tutorial：https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 3

您可以改用 flexbox 布局。

为此，您创建了一个 div，您希望 flexbox 位于其中：

<div class="flex-menu">
   <a>Item 1</a>
   <a>Item 2</a>
   <a>Item 3</a>
</div>

在CSS中，设置display参数为flex:

.flex-menu {
   display: flex;
   flex-direction: row;
}

每列仅显示一个嵌套到主 div 的 html 标记。

如果您不明确说明项目位置，将按代码顺序分配位置。弹性框菜单看起来像这样：

项目 1 |第 2 项 |项目 3

Answer 4

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

您需要定义一个 12 列的网格并设置类以跨越如此多的行和如此多的列，因此与 bootsrap 类您可以将元素的大小设置在第 1 到第 12 之间一行的位，但是，与 bootstrap 不同，它还允许您跨行跨越元素而无需额外的 markup/inbrication:

示例：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>

这里有 2 个有用的 link 开始玩 CSS 网格布局：

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

https://gridbyexample.com/examples/

Answer 5

为@G-Cyrillus 的答案添加一些修饰，已接受的答案。

如果您希望您的列在特定屏幕尺寸下全宽以获得更好的用户体验，请将其添加到 CSS 文件的底部：

/* Full Width below 768 pixels */
@media only screen and (max-width: 768px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
     grid-column: auto/span 12;
  }
}

所以你的完整代码应该是这样的：

.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;
}

/* Full Width below 768 pixels */
@media only screen and (max-width: 768px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
     grid-column: auto/span 12;
  }
}

<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 网格布局创建一个 Bootstrap 类似 12 列（仅网格）的网格系统

How can i create a Bootstrap like 12 column ( only grid ) grid system using new CSS GRID Layout

css

grid

flexbox

twitter-bootstrap

css-grid