新しいCSSグリッドテクノロジを使用してブートストラップのような12列グリッドを作成するにはどうすればよいですか？誰も私にそれを行う方法デモを見せてもらえますか？私は本当にこの新しい技術と混同しています。私は、CSSグリッドを使って簡単な12列のグリッドライクなブートストラップを作りたいと思っています。これには私のアプローチが必要ですか？新しいCSSグリッドレイアウトを使用して12列（グリッドのみ）のグリッドシステムのようなブートストラップを作成するにはどうすればいいですか
それはこのようになります。この特定のコードとブートストラップのようにラップするつもりはないので、グリッドが「グリッド行を」持っていることを覚えておいてください
.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本の垂直線を定義します。しかし、
/* 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>なお：1が常にある（そしてなければならない）があるので、あなただけの12このような彼らの前の行までの相対距離とライン）を作成する必要がありますCSSグリッドはブートストラップグリッドよりもはるかに強力です。そのため、CSSグリッドを最大限に活用してください。 F.e. grid-template-areaは本当に便利です。列/行の名前を付けます。あなたが代わりにフレキシボックスレイアウトを使用することができますhttps://css-tricks.com/snippets/css/complete-guide-grid/
：（もちろん、行の追加自体はかなり強力です）
あなたはここでかなり良い概要/チュートリアルを見つけることができます。
そのために、あなたはフレキシボックスが内側になりたいdiv作成：
.flex-menu {
display: flex;
flex-direction: row;
}
つだけのhtmlタグにネストされた：CSSで
<div class="flex-menu">
<a>Item 1</a>
<a>Item 2</a>
<a>Item 3</a>
</div>
を、flexとしてdisplayパラメータを設定しますメインのdivが1列に表示されます。
明示的に項目の位置を指定しないと、コードの順番で位置が割り当てられます。フレックスボックスメニューは次のようになります：
項目1 |アイテム2 |アイテム3
display:grid;を使用すると、列と行も作成できます。
12列のグリッドを定義し、非常に多くの行と多くの列にまたがるようにクラスを設定する必要があります。同様にbootsrapクラスを使用すると、要素のサイズを行の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便利なリンクトンでありますO CSSグリッドレイアウトで再生を開始：
どのようにフレックス方向：列が12列を描画するために起こっていますか？ をブロックに設定した場合は、フレックスメニューの表示にリセットを必要としません。少なくとも、質問はこの回答に値しました:)） –
Thanks @ G-Cyr！ 'row'の代わりに' columns'を使いました。この方法では、アイテムは横に並んで表示されます。訂正されました！ –