5分でCSSグリッドを学ぶ-初心者向けのチュートリアル

グリッドレイアウトはウェブサイトのデザインの基本であり、CSSグリッドモジュールはそれを作成するための最も強力で最も簡単なツールです。個人的には、たとえばBootstrapよりもはるかに優れていると思います(理由はこちらをご覧ください)。

このモジュールは、主要なブラウザー(Safari、Chrome、Firefox、Edge)でもネイティブにサポートされているため、すべてのフロントエンド開発者は、それほど遠くない将来にこのテクノロジーを学ぶ必要があると思います。

この記事では、CSSグリッドの非常に基本的なことをできるだけ早く説明します。基本を理解するまで、気にしないでおくべきことはすべて省略します。

無料のCSSグリッドコースも作成しました。に完全にアクセスするには、ここをクリックしてください

それ。

または、コース全体で学習する内容を説明しているこの記事を確認してください。

さあ、飛び込みましょう!

最初のグリッドレイアウト

CSSグリッドの2つのコア要素は、ラッパー(親)と

アイテム(子供)。ラッパーは実際のグリッドであり、アイテムはグリッド内のコンテンツです。

6つのアイテムを含むラッパーのマークアップは次のとおりです。

 1 2 3 4 5 6 

ラッパーdivグリッドに変換するには、単に次のように表示します。

grid

ただし、グリッドをどのように表示するかを定義していないため、これはまだ何もしません。6div'sを積み重ねるだけです。

少しスタイリングを追加しましたが、CSSグリッドとは何の関係もありません。

列と行

2次元にするには、列と行を定義する必要があります.3つの列と2つの行を作成しましょう。grid-template-rowおよびgrid-template-columnプロパティを使用します。

に3つの値を記述したgrid-template-columnsので、3つの列を取得します。に2つの値を指定したため、2つの行が取得されますgrid-template-rows

値は、列の幅(100px)と行の高さ(50px)を決定します。結果は次のとおりです。

値とグリッドの外観の関係を正しく理解するために、この例も見てください。

.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 50px 50px; } 

コードとレイアウトの関係を把握してみてください。

これがどのように実行されるかです:

アイテムの配置

次に学ぶ必要があるのは、グリッドにアイテムを配置する方法です。レイアウトの作成が非常に簡単になるため、ここで超能力を得ることができます。

以前と同じマークアップを使用して、3x3グリッドを作成しましょう。

.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } 

これにより、次のレイアウトになります。

3x3グリッドとして定義したのに対し、ページには3x2グリッドしか表示されないことに注意してください。これは、グリッドを埋めるアイテムが6つしかないためです。さらに3つある場合は、一番下の行も埋められます。

アイテムを配置およびサイズ変更するには、それらをターゲットにして、grid-columnおよびgrid-rowプロパティを使用します。

.item1 { grid-column-start: 1; grid-column-end: 4; } 

ここで言っているのは、item1を最初のグリッド行で開始し、4番目の列行で終了することです。つまり、行全体を占めることになります。

これが画面上でどのように再生されるかを示します。

3列しかないのになぜ4列の行があるのか​​混乱していますか?この画像を見てください。ここでは、列の線を黒で描いています。

Notice that we’re now using all the rows in the grid. When we made the first item take up the entire first row, it pushed the rest of the items down.

Finally, I’d like to show a simpler way of writing the syntax above:

To make sure you’ve understood this concept properly, let’s rearrange the items a little bit.

.item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } 

Here’s how that looks on the page. Try to wrap your head around why it looks like it does. It shouldn’t be too hard.

And that was it!

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.