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

Posted 2023-03-06

【中文标题】如何使用新的 CSS GRID 布局创建像 12 列（仅网格）网格系统的 Bootstrap

【英文标题】：How can i create a Bootstrap like 12 column ( only grid ) grid system using new CSS GRID Layout

【发布时间】：2018-03-16 06:10:08

【问题描述】：

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

【参考方案1】：

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

您需要定义一个 12 列的网格并设置类以跨越这么多行和这么多列，因此与 bootsrap 类一样，您可以在一行的第 1 位到第 12 位范围内调整元素的大小，但是，与 bootstrap 不同，它还允许您跨行跨越元素而无需额外的标记/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 个有用的链接开始玩 CSS 网格布局：

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

https://gridbyexample.com/examples/

【参考方案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 项

【讨论】：

flex-direction:column 将如何绘制 12 列？如果您将 设置为块，则不需要为弹性菜单显示任何重置...至少，这个问题值得这个答案:))

感谢@G-Cyr！我使用columns 而不是row。这样，项目将显示在另一个之下，而不是并排显示。已更正！

【参考方案3】：

应该是这样的：

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

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

【参考方案4】：

这真的很简单：定义 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-grid 比 bootstrap 网格要强大得多，因此请确保充分发挥它的潜力。 F.e. grid-template-area 真的很有用。正如命名列/行一样。 （当然，添加行本身也很强大）

你可以在这里找到一个很好的概述/教程：https://css-tricks.com/snippets/css/complete-guide-grid/

【参考方案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>