如何創建像12列（僅網格）的網格系統使用新的CSS網格系統佈局

Question

如何使用新的CSS網格技術創建類似引導程序的12列網格？任何人都可以告訴我演示如何做到這一點？我真的很困惑這種新技術。我想使用CSS網格製作一個簡單的12列網格狀引導程序。我的方法應該是什麼？

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>

記住電網具有「網格行」，所以它不會包一樣引導與這個特殊的代碼。我參考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網格比引導網格強大得多，所以一定要充分發揮它的潛力。 F.E. grid-template-area真的很有用。正如命名列/行一樣。 （當然，加行本身是相當強大）

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

Answer 3

你可以使用一個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

Answer 4

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/