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

Question

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

Answer 1

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

你需要定义一个包含12列的网格，并设置类来跨越如此多的行和如此多的列，所以类似于bootsrap类，你可以在一行的第1位到第12位内调整元素的大小，但是，与bootstrap不同，它还允许您跨行元素而不需要额外的标记/内联：

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

https://gridbyexample.com/examples/

Answer 2

您可以使用 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标记。

如果您没有明确说明项目位置，则将按照代码顺序分配位置。 flexbox菜单将如下所示：

第1项|第2项|第3项

Answer 3

它想要这样：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

请记住，网格有一个＆＃34;网格行＆＃34;，所以它不会像Bootstrap一样包裹这个特定的代码。如果您需要查看更多详细信息，我引用了https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout。

Answer 4

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

＆＃13;

＆＃13;

/* 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}

＆＃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>

＆＃13;

＆＃13;

＆＃13;

但请注意，css-grid比引导网格功能强大得多，因此请务必充分利用它。 F.E. grid-template-area非常有用。正如命名列/行一样。 （当然，添加行本身非常强大）

您可以在此处找到相当不错的概述/教程：https://css-tricks.com/snippets/css/complete-guide-grid/

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>