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

问题描述：

如何使用新的CSS网格技术创建类似引导程序的12列网格？任何人都可以告诉我演示如何做到这一点？我真的很困惑这种新技术。我想使用CSS网格制作一个简单的12列网格状引导程序。我的方法应该是什么？如何创建像12列（仅网格）的网格系统使用新的CSS网格系统布局

答

这将是这样的：

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

记住电网具有“网格行”，所以它不会包一样引导与这个特殊的代码。我参考https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout如果你需要看到它的更多细节。

答

那么这很容易：定义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网格比引导网格强大得多，所以一定要充分发挥它的潜力。 F.E. grid-template-area真的很有用。正如命名列/行一样。（当然，加行本身是相当强大）

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

答

你可以使用一个Flexbox的布局来代替。

对于这一点，你创造出你想要的Flexbox的是里面div：

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

只有一个HTML标记嵌套每列显示主要div。

如果您没有明确说出物品的位置，这些位置将按代码顺序进行分配。 Flexbox菜单将如下所示：

第1项|第2项|项目3

如何弯曲方向：列要绘制12列？如果你设置你的为阻止状态，则不需要为弹性菜单显示任何重置...至少，这个问题值得这个答案:)） –

谢谢@ G-Cyr！我使用'列'而不是'行'。这样，项目将显示一个在另一个之下，而不是并排。更正！ –

答

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

您需要定义一个12列的网格并设置类以跨越很多行和很多列，如此类似的靴子类可以在一行的第1至第12位范围内调整元素的大小，但与引导程序不同，它可以让你也跨越通过行元素，无需额外的标记/ 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有用链T Ø开始使用CSS布局网格玩：

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

https://gridbyexample.com/examples/

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

相关推荐