layoutについてこれまでのfloatレイアウトで複雑なレイアウトを作成する場合には、divタグを多用するなどトリッキーな作業が必要でした。CSS3ではFlexレイアウトが開発され、フレキシブルなレイアウトが柔軟に作成できるようになりました。Flexboxによる方法も所詮は1次元の流れを調整するものです。今回紹介するGridレイアウトは2次元の配置が行えることがポイントで、より柔軟なレイアウトが可能になりました。それはあたかも紙面のレイアウトのようなものもシンプルなタグで実現できます。1下の図は典型的なflex-layout次の図はgrid-layout使用可能なブラウザ開発ブラウザはFirefoxがお薦めです。グリッドラインの表示と番号の表示が嬉しいです。グリッドレイアウトコーディングの基本サンプルコードはGitHubページへ完成見本グリッドレイアウトを行うにはまず次の名前を覚えましょう。グリッドコンテナ:個々のグリッドを囲むコンテナグリッドアイテム:コンテナ内の各子要素グリッドトラック:2つのグリッドラインの間の領域のことです。トラックは作成されます。グリッドライン:グリッドトラックの境界線で自動で番号が付けられる。グリッドの最小単位がグリッドセルです。囲まれた領域のことで、表に於けるセルと考え方はほぼ同じグリッドエリア:1つ以上のグリッドセルからなる長方形の領域です。名前付きグリッドエリアでエリアを定義する方法がありますガター:隣接するグリッドの間隔グリッド作成手順グリッド作成の方法はグリッドラインを指定する方法とグリッドエリアを指定する方法があります。どちらでも使いやすい方法をとると良いでしょう。(そのうちこれが定番!となるやり方が誰かによって唱えられるかもしれませんが。)グリッドレイアウトはグリッドラインで決める方法とグリッドエリアで決める方法がある。ここでは、グリッドラインで指定する方法から説明します。グリッドコンテナ作成まずは、なにはともあれ、「display:grid」を設定することでグリッドコンテナーを作成することができます。inline-grid」を指定します。グリッドコンテナーを作成すると、すべての直接の子要素がグリッド要素へと変わります。「display:grid」グリッドトラック作成グリッドラインでグリッドのサイズを決めていきます。「grid-template-columns」と「grid-template-rows」プロパティを使用してグリッド上に行と列を定義します。「grid-template-columns」と「grid-template-rows」グリッドコンテナにしたい要素に「display:grid」プロパティを記述します。グリッドコンテナに行方向を表す「grid-template-rows」プロパティで値は半角スペースで区切りながらサイズを決めていきます。グリッドコンテナに列方向を表す「grid-template-columns」プロパティで値は半角スペースで区切りながらサイズを決めていきます。行間や列間はマージンを入れるのではなく、グリッドコンテナにに「grid-gap」プロパティを使います。グリッドアイテムに特に設定がなければグリッドアイテムのソースの順番にグリッドコンテナで決めた場所に格納されていきます。「gap」プロパティは、行や列の間の余白を定義します。これは「row-gap」及び「column-gap」の一括指定です。「gap」プロパティはもともと「grid-gap」で定義されていました。「gap」当分は「grid-gap」も併記ガター作成のプロパティは、「grid-gap」プロパティと定義されていました。「gap」プロパティと記述が変わりました。実装していないブラウザーがまだ多いため、「grid-gap」プロパティを使用する必要があります。同じサイズのグリッドを複数定義する場合は、repeat()を使うことができます。繰り返しでない値と併記するには、半角スペースで区切って続ければOKです。関数はトラックリスト内での繰り返し部分を表し、列や行の繰り返しをよりコンパクトに書くことができます。中で使うことができます。サイズ)fr単位についてfr単位は、グリッドコンテナー内の利用可能な空間の分数(fraction)を表します。グリッドコンテナにグリッドを作成してまだ隙間がある場合にそれを指定数値で分割して埋めてくれる単位が「fr」です。repeat(3,1fr);max-contentとmin-contentの使い方も覚えておきましょう。max-contentはcontentに依存した大きさになり、最大のcontentのサイズに従います。min-contentは最小のcontentのサイズになります。詳細は別記事を作成します。グリッドアイテムの配置グリッドアイテムはソースの順番にグリッドコンテナのグリッドに配置されます。その配置を変更したい場合はgrid-rowプロパティとgrid-columnプロパティを使います。grid-rowプロパティ「grid-row-start」と「grid-row-end」のショートハンドが「grid-row」の記述です。「grid-row」プロパティの値は、2つのgrid-lineの値で指定します。スラッシュの前はgrid-row-start値、スラッシュの後ろはgrid-row-endの値を記述します。grid-columnプロパティ「grid-column」プロパティは、「grid-column-start」と「grid-column-end」のショートハンドです。「grid-column」プロパティの値は、2つのgrid-lineの値で指定します。スラッシュの前はgrid-column-start値、スラッシュの後ろはgrid-column-endの値を記述します。複数のグリッドセルをまとめて一つのエリアにしたい場合もグリッドラインで記述することができます。2つの列を一つにまとめる場合は「grid-column」プロパティの終わりのラインの番号で指定します。次の例では「grid-column:2/3」ではなく「grid-column:2/4」としています。3つの列をまとめたければ「grid-column:2/5」とします。grid-column:2/4;}また、spanを使うこともできます。以下の記述も同様になります。2;}また「grid-column-end」の値を-1と指定すると、それは最後の列までを意味します。.item--1{background-color:red;grid-row:2/3;grid-column:1/-1;}例えば以下のようなレイアウトは今までは、レイアウトのために無駄なdivの入れ子を作るなどする必要があり、簡単にできなかったものです。grid)複数の列や行のグリッドを繋げて配置すると、余ったグリッドアイテムは指定のないグリッドに配置されます。溢れ出したグリッドアイテムは、自動的に作成された行や列に収まることになります。grid)と言います。暗黙的なグリッドの調整が必要な場合は「grid-auto-rows」や「grid-auto-columns」プロパティまたは「grid-auto-flow」プロパティを使います。一つのエリアに複数のグリッドアイテムを置く一つのエリアに複数のグリッドアイテムを置くことができます。同じエリアにグリッドアイテムを重ねるわけです。このように重ねた場合は「z-index」で重ね順を変えることができます。同じ位置を指定したレイアウト1redの上に2orangeが重なっています。「grid-row」と「grid-column」をさらにまとめたのが、「grid-area」プロパティです。次の例は1行3列から2行4列までという意味になります。この記述は慣れるまでわかりにくいかもしれませんので無理にこれを使う必要はありません。4グリッドラインに名前をつけるグリッドラインは自動で引かれますが、その時に番号が振られます。その番号を使用して設定を行うことができますが、番号の代わりに名前をつけることもできます。その場合は命名するときは[]の中に名前を入れます。名前を使うときはそのまま名前を使います。grid-row:row1-start/row1-end;}また、リピートする場合は次のようにします。grid-template-rows:repeat(4,[row-start]1fr[row-end]);エリアベースのグリッド作成グリッドエリアを指定するとき、名前付きのグリッド領域で指定することができます。この方法は信じられないほど直感的にエリアを決めることができます。グリッドエリアに名前をつける「grid-template-areas」プロパティを使うとグリッドエリアに名前をつけることができます。ポイントは「grid-template-areas」プロパティの設定です。一つの行ごとに、複数のセルの名前を””でくくることがポイントです。グリッドを割り与えたくない場所には「.」で表現します。item--9";}各グリッドアイテムへの紐付けは以下のようにします。item--2;}align-itemsとjustify-itemsの活用align-itemsやjustify-itemsはflex以外のgridでも使用できます。flex-startがstartになるなど微妙に値が違いますので注意してください。stretch;」がグリッドコンテナにかかっています。この値を「center」などに変更すると確認することができます。「align-self」や「justify-self」プロパティも使用が可能です。SNSで共有しましょう。