CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。APIコラム海外エンジニアエンジニア論PC機器・書籍HOMEWebCSS3CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07CSS3初心者向けこの記事では、CSSのレイアウト手法であるグリッドレイアウトについてその基本的な使い方を説明していきたい。この記事は以下のような人を対象にしている。グリッドレイアウトがどのような手法のレイアウトか知りたい!グリッドレイアウトの使い方を目的別に逆引き検索したい!グリッドレイアウトで使われるプロパティの種類と役割を確認したい!グリッドレイアウトは非常に理解しやしいレイアウト手法。エクセルの表を作成するような感覚で、直感的にレイアウトを作成することができる。CSSを使ったレイアウトに苦手意識を持つ人ももう一度この機に試してみてほしい。グリッドアイテムのプロパティCSSグリッドレイアウトとは?グリッドレイアウトは格子状のグリッドにアイテムを配置していくレイアウト。イメージしづらいという人はエクセルの表を思い浮かべてもらうと分かりやすいかもしれない。グリッドレイアウトのイメージグリッドレイアウトには様々なグリッドの構造・アイテム配置の指定方法があり、自分が使いやすいと感じる方法で構成・配置を指定していくことができる。グリッドレイアウトは要素のdisplayプロパティをgridに指定することで使うことができる。grid;グリッドレイアウトは同じくレイアウトの手法であるフレックスボックスと共にCSS3から導入された。フレックスボックスについて知りたい人はこちらの記事を読んでほしい。関連記事CSSフレックスボックスの使い方を初心者向けに解説!縦・横並び/間隔/幅の指定方法。この記事では、CSSのフレックスボックス(Flexbox)について基本的な使用方法を初心者向けに、また目的ごとに解説したい。[...]グリッドレイアウトの構成グリッドレイアウトを構成する要素はそれぞれに以下のように呼ばれる。グリッドアイテム各要素の呼び方は人によって若干違いがあるが、この記事では上記の呼び方で統一したい。グリッドレイアウトの使い方ではグリッドレイアウトの使い方を確認しよう。グリッドレイアウトを使用するフレックスボックスはコンテナとアイテムから構成される。displayプロパティにgridを指定すると、その要素はグリッドレイアウトのコンテナーとなる。grid;}displayをinline-gridにするとグリッドがインライン要素となる。(ちなみに通常のgridはブロック要素である。)グリッドを作成するグリッドコンテナにグリッドを作成していこう。grid-template-rowsとgrid-template-columnsプロパティを使用してグリッドの列と行の大きさを指定する。ここでは4つの列と3つの行を作りそれぞれにサイズをpxで指定する。120px;}次にグリッドに表示するアイテムを作成する。containerのdiv要素の中に適度な数のdiv要素を作成し、それぞれに適当な色を割り当てる。#d3d2c6">G</div></div>問題が無ければ以下のように色分けされたグリッドがAからGまで順番に表示されるはず。サイズ指定で使用する単位アイテムのサイズを指定する際は様々な数量単位を使うことができる。分数で指定する(fr)アイテムのサイズ指定でもっともよく使うのがこのfrという単位。「fr」はfractionの略で、コンテナの合計幅からサイズ指定した部分を取り除き、残りを分数で割り当てる。前章で作ったグリッドを例にfractionを使ってみよう。120px;}この場合、コンテナの幅が800px、最初の列が50px、残りは計6frなので、(800-50)÷6=125で1frは125pxとなる。よってそれぞれのセルの幅は50px・375px・250px・125pxとなる。連続するアイテムサイズの指定グリッド内で繰り返し同じサイズを指定する場合はrepeatを使用するといい。100px;最小と最大値を指定する(minmax)minmaxでは、サイズの最小値と最大値を指定することによってサイズをフレキシブルに割り当てる。100px)で指定している。コンテナの幅が800pxで最初の3つの列を合計すると450pxになりまだ幅に余裕があるので4つ目の列は100pxで表示される。次にコンテナの幅を480pxに変更してみる。コンテナの幅が480pxで最初の3つの列の合計が450pxなので残りは30pxとなる。この場合は4列目は指定した最小値である50pxで表示される。余白を埋める(auto)コンテナの残りの幅をセルで埋めたい場合はautoを使用するといい。auto;この例では4つ目の列をautoにしている。コンテナの幅が800pxで最初の3つの列の合計が450pxなので4つ目の列は350pxで表示される。コンテンツのサイズを基準にする(max-content・min-content・fit-content)グリッドアイテムにあるコンテンツを基準にして、アイテムのサイズを決定したい場合もあるだろう。いった場合はmax-content、min-content、fit-contentなどを単位として指定する。以下の例では、アイテムDをテキストに書き換えたうえで、4行目をmax-contentにする。max-content;コンテントの最大幅に合わせて列が表示される。グリッドアイテムの配置グリッドレイアウトではアイテムはHTML上の順番で自動的に配置されるが、アイテムの位置を特に指定したいという場合もあるだろう。いった場合はグリッドアイテムのCSSに対してプロパティを付け加える。3列目の始めから5列目の始めまで。1行目の始めから2行目の始めまで。2;}これによってアイテムAは3列目と4列目を埋めるように配置される。A以外のアイテムはグリッドの空白を埋めるように再配置される。startとendをひとつのプロパティとして列と行を指定することもできる。2;さらにgrid-areaプロパティを使用すればさらに列と行を同時に指定することができる。次にグリッドレイアウトで使用されるプロパティを紹介していきたい。グリッドレイアウトのCSSプロパティの中には、グリッドコンテナに対して使用するものとグリッドアイテムに対して使用するものがある。グリッドコンテナのプロパティ以下はグリッドコンテナに使用できるプロパティと指定可能な値の一覧だ。コンテナの横軸・縦軸の揃え方グリッドアイテムのプロパティ以下はグリッドアイテムに使用できるプロパティと指定可能な値の一覧だ。執筆者:久野嘉樹ドイツ・ベルリン在住のフロントエンド・エンジニア。ドイツにてプログラマのための職業訓練プログラム(インターン2社を含む)を終了したのち、医療関係のソフトウェア会社にてフルスタック・エンジニアとして、様々な開発現場に参加する。現在はドイツの大手SIerにてシニアデベロッパーとして有名企業を顧客とする大規模開発に従事する。Java・TypeScriptをメインに業務管理ソフト・ウェブアプリケーションやAndroidアプリなどの開発経験を持つ。現在はSPA(シングルページアプリケーション)のスペシャリストとしてAngularをメインにフロントエンドの開発に携わる。2009年よりドイツに在住。ドイツ語能力はC1レベル。関連する記事CSSフレックスボックスの使い方を初心者向けに解説!縦・横並び/間隔/幅の指定方法。2022.08.20この記事では、CSSのフレックスボックス(Flexbox)について基本的な使用方法を初心者向けに、また目的ごとに解説したい。【2023年】TypeScriptのおすすめ書籍5冊!レベル別に入門書からプロ向けまで紹介。2023.05.14【2023年】JavaScriptのおすすめ本7選!入門者・初心者向けにセレクト。2023.03.04HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。2023.01.21CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07【2023年】人気のヘッドレスCMSを徹底比較!Contentful・Strapi・Hygraphなど。JSフレームワーク徹底比較!JavaScript実践VSCodeでReactの開発を行う!React開発者のためのオススメ拡張機能。同一オリジンポリシーを理解する。APIコラム海外エンジニアエンジニア論PC。