自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。Layoutでは様々なレイアウトが可能になります。指定項目が多いため、パートに分けて解説していきます。関連記事まとめグリッドレイアウトとは基本となる構築HTML、CSSを使ってレイアウトをする時には、flexboxやfloatを指定しレイアウトを構築していきますが、これは水平方向か垂直方向のいずれかに沿って要素を配置していくものです。上記のように、要素を1方向に沿うように配置しレイアウトを構築していきます。両方に沿って要素を配置できます。Layoutコンテナを格子状のマス目のように考えることができます。要素の長さや、順番に関わらず、上記のように2次元的にレイアウトすることが可能です。1方向に関わらず、自由に要素を配置できます。Layoutコンテナに指定できます。Layoutコンテナの子要素は自動的にグリッドアイテムとなります。inline-grid;1か2のどちらかを指定します。Layoutコンテナに指定します。-columnsプロパティとは、グリッドレイアウトの行と列のトラックサイズを指定します。指定する際には、トラックの数だけ、半角スペースに続けてサイズを指定します。inline-grid;1か2のどちらかを指定します。「200px」、「1fr」のようにトラックサイズで指定します。repeat()関数repeat()関数を使って指定します。今回は解説いたしません。minmax()関数minmax()関数を使って指定します。今回は解説いたしません。-columnsプロパティでは、行と列のトラックのサイズと数を指定します。トラックの数が決まると、上記の図のように行と列のラインの数も決まります。各ラインが交差してできるスペースをセルといいます。200px」のように指定します。1fr」のように指定します。frとは、という単位は「fractions」の略になります、固定値のトラックサイズを除いた長さ(残りのサイズ)になります。【STEP02】grid-templateの使い方、行と列のトラックサイズを指定するgrid-templateとは、行と列のトラックサイズをまとめて指定します。-endの使い方、アイテムの開始、終了位置を指定します。-columnの使い方、アイテムの位置をまとめて指定します。【STEP05】grid-template-areasの使い方、グリッドレイアウトのエリアを指定するgrid-template-areasの使い方、グリッドレイアウトのエリアを指定します。【STEP06】grid-gapの使い方、アイテム同士間の余白を指定する!grid-gap使い方、グリッドアイテム同士間の余白を指定します。【STEP07】grid-auto-flowの使い方、アイテムの配置方向を指定する!grid-auto-flow使い方、グリッドアイテムの配置方向を指定します。-columnsプロパティとは、暗黙のトラックのサイズを指定します。まとめ今回はこれで以上です。次回は「グリッドレイアウトの行と列のトラックサイズをまとめて指定する」について解説します。Layoutコンテナとは、グリッド全体を表す要素になります。グリッドアイテムとは、グリッドのエリアに配置する要素になります。行のトラックサイズを表します。列のトラックサイズを表します。各ラインが交差してできるスペースをセルといいます。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。