CSSグリッドレイアウトを使用して簡単なレイアウトを作成する方法

公開: 2017-12-19

印刷デザインに手​​を出したことがあれば、グリッドレイアウトのアイデアがどこから来たのかを知っています。 グリッドは、ページ上にデザイン要素を配置するために使用される正確な測定ツールです。 このアイデアは、コンテンツを整理して統一するためにWebでよく使用され、ユーザーの表示エクスペリエンスを向上させます。

Webデザインの実践が新しいとき、レイアウトは非常に単純でした。 ヘッダー、サイドバー、コンテンツエリア、およびフッター。 現在、Webが進化するにつれて、レイアウトはより複雑になり、Webデザイナーとして取り組むべきことがたくさんあります。 多くの場合、多数のコンテンツリージョン、レスポンシブデザイン、複数ページのレイアウトテンプレートデザインなどが必要になります。 また、デザインを実装して正しく表示するには、フロートとポジショニングが必要です。 フロートは単純に聞こえますが、操作が難しい場合があります。

幸いなことに、グリッドはWebコンテンツをデザインおよび表示するためのより簡単な方法を提供します。 CSSグリッドレイアウトが急速に注目を集めているので、デザイナーになるのは素晴らしい時期です。 グリッドは近年Webデザインの新しいアイデアのように感じるかもしれませんが、信じられないかもしれませんが、CSSグリッドレイアウトは長年にわたって機能しています。 それらに対するブラウザのサポートは非​​常に迅速に行われたため、設計者が長年対処しなければならなかったポジショニングに関するフラストレーションの一部を緩和するのに役立ちます。

いよいよグリッドに侵入し、新しいデザインの可能性を探ります。

CSSグリッドのサポート

それはすべてあなたがサポートする必要のあるブラウザに依存しますが、CSSグリッドを使用するときに「フラグモード」について心配する必要がない可能性はかなりあります。 いつでもCanIUseのドキュメントにアクセスして再確認できますが、CSSグリッドのサポートが劇的に増加し、多くの設計者が本番環境で使用できるようになりました。これがお祝いの理由です。

無料のローカル開発アプリであるLocalは、ワークフローを簡素化し、サイトで安全に実験するのに役立ちます。 今日それを試してみてください！

CSSグリッドレイアウトの基本

CSSを利用することで、グリッドレイアウトはWebページのコンテンツ領域を定義するのに役立ちます。 CSSグリッドレイアウト仕様で定義されている比較的新しいプロパティのセットがあります。 これは、この新しいレイアウト設計方法についてさらに学ぶときに参照するのに最適なリソースです。 CSSグリッドレイアウトは、物事を簡素化し、レイアウトの作成を容易にするのに役立ちます。 グリッドは、測定値を定義できる構造と考えてください。

css-grid-layouts-grid-diagram

グリッドの一部

線

この場合、5本の垂直線と3本の水平線があります。 行には1から始まる番号が付けられます。 この例では、縦線が左から右に示されていますが、これは書き込み方向によって異なります。 これは左から右への読み取りを示しているため、右から左への読み取りでは、状況が逆になります。 行には名前を付けることができ（オプション）、CSSで行を参照するのに役立ちます。

トラック

トラックは、2本の平行線の間のスペースです。 この図には、4つの垂直トラックと2つの水平トラックがあります。 ラインとトラックの間には大きな二重の努力があります。 行は、コンテンツの開始位置と停止位置を参照するための優れた方法です。 トラックは、コンテンツが実際に移動する場所です。

細胞

セルは、水平トラックと垂直トラックが出会う場所にあります。 図には8つのセルがあります。

エリア

エリアを指定するときにセルが機能します。 エリアは、複数のセルにまたがることができる長方形です。 線のように、領域にはオプションで名前を付けることができます。 図には、「A」、「B」、「C」のラベルがいくつか含まれています。

グリッドレイアウトの作成

レイアウトを開始する前に、物事をスケッチすると役立つ場合があります。 古き良き方眼紙に代わるものはありません。

グリッドのHTML

<div class="container">
  <div class="grid header">Header</div>
  <div class="grid sidebar">Sidebar</div>
  <div class="grid content">Main Content</div>
  <div class="grid extra">Extra Content</div>
  <div class="grid footer">Footer</div>
</div>

コンテナは非常に重要です。 コンテナ内には、Webサイトのさまざまなコンテンツブロックがあります。 コンテナ内のグリッドアイテムの順序は重要ではありません。 次に、CSSを使用してそれらをレイアウトに配置します。

CSSスタイル

HTMLマークアップが完了したら、最も重要な宣言がCSSで行われます。 コンテナ内で、 display:gridまたはdisplay:inline-gridを適用する必要があります。 ブロックレベルのグリッドが必要な場合は、 display:gridを使用してください。 インラインレベルのグリッドにはdisplay:inline-gridを使用します。 詳細については、この優れたリファレンスガイドをご覧ください。

.container {
  	display: grid;
  	grid-template-columns: 1fr 3fr;
        grid-column-gap: 10px;
        grid-row-gap: 15px;
}

.grid {
  background-color: #444;
  color: #fff;
  padding: 25px;
  font-size: 3rem;
}

grid-template-columnsプロパティとgrid-template-rowsプロパティは、行と列の幅を指定するために使用されます。 grid-template-columnsは1frおよび3frとして設定されています。 これは、グリッドが分数単位で形成されている場所です。 これらの値を使用すると、2つの列があり、幅が等しくないことがわかります。 3frに設定された列は、他の列の3倍の幅です。 これは、サイドバーがコンテンツ領域よりも狭く表示される方法を説明しています。

応答性の高いカスタマイズを行うことができますが、フラクショナルユニットを使用することは素晴らしい最初のステップです。 エリア間の間隔は、 grid-column-gampとgrid-row-gapで制御できます。

物事はかなりタイトに見えますが、いくつかの仕様があれば、物事は形になります。

この例はヘッダーの配置から始まりますが、要素は最適な順序で配置できます。 フッターから始めたい場合は、それも機能します。

css-grid-layouts-grid-example-start

列1から列4、行1から行2のヘッダーから始めましょう。CSSは次のようになります。

.header {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

サイドバーが押しつぶされていて、あまり見えないことに気付くかもしれません。 少し並べ替える必要があります。 このレイアウトでは、線を参照して配置を取得すると、配置に役立ちます。 線はガイドラインとして機能します。 ヘッダーは、行1の行と行2の行の間にあります。 サイドバーの場合、3行目から始まり、6行目で終わります。 ヘッダー行は2で終了したため、これはそのすぐ下に配置されます。 例を表示するには、Codepenのプロジェクトを参照してください。

grid-column-startを使用して、要素の開始垂直線を指定します。 この場合、3に設定されます。 grid-column-endは、要素の終了垂直線を示します。 この場合、このプロパティは4に等しくなります。 他の行の値も同じ方法で設定されます。 サイドバーの配置はそこにあり、コンテンツ領域で覆われているだけです。

.sidebar {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 4;
  background: #a0c263;
}
css-grid-layouts-grid-exmple-start-02

メインコンテンツは3列目から始まり、4列目で終わります。 サイドバーの上部とコンテンツ領域は均一であるため、どちらもgrid-row-startが3になります。 コンテンツとサイドバーの高さがどのように高いのか疑問に思われるかもしれません。 コンテナに高さ（この場合は400px）を設定することにより、これは他の要素よりも高くなります。

.content {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  background: #f5c531;
  height: 400px;
}

最後の2つのコンテンツ領域は、追加のコンテンツ領域とフッターです。

.extra {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
  background: #898989;
}

.footer {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
  background: #FFA500;
}
css-grid-layouts-grid-example-start-final

終了宣言と開始宣言をより効率的に記述できます。 grid-column-start: 1;が表示される場合があります。 およびgrid-column-end: 3; 速記で書かれています。 これはgrid-column: 1 / 3; 。 これと同じアイデアを使用して、列の行情報を宣言できます。

応答性の利点

レイアウトが作成されたので、それは非常に「デスクトップ」のように見えます。 タブレットやモバイルデバイスはどうですか？ CSSグリッドレイアウトはメディアクエリでうまく機能するため、デザインはさまざまな画面サイズに適応できます。 本当にすばらしいのは、これらのさまざまなメディアクエリブレークポイントでコンテンツ領域を変更できることです。 設計者として、これは、さまざまなブレークポイントでレイアウトに最適なものを選択することを意味します。 たとえば、「追加コンテンツ」を「コンテンツ」領域の上に配置する場合は、正しい列と行を指定できます。

/* For mobile phones: */
    .header {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
  }

  .extra {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
  }

  .content {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 6;
    background: #f5c531;
    height: 400px;
  }

列を1で開始し、4で終了することにより、コンテンツ領域を全幅にしました。 グリッド行は、「追加コンテンツ」が「コンテンツ」の上になるように配置されます。

CSSグリッドレイアウト用のブラウザツール

レイアウトを設計しているとき、または他のWebサイトを調べているとき、FirefoxはCSSグリッドレイアウトを操作するための優れたツールを提供します。 これはCSSグリッドプレイグラウンドと呼ばれ、グリッドの調査を非常に直感的にします。 インスペクターに移動すると、[レイアウト]タブに、グリッドがどのように構築されているかを視覚的に確認するオプションがあります。 さまざまなグリッドプロパティが全体的なグリッドレイアウトと設計にどのように影響するかを調べるために、このツールを使用すると、設計プロセスが簡単になります。

CSSグリッドレイアウトは、Webレイアウトを作成するための新しいエキサイティングな方法です。 ご覧のとおり、単純なページレイアウトを作成する場合、起動して実行するのは非常に簡単です。 この簡単な例は、より複雑なレイアウトを作成するための優れた基盤です。 これが人気を博すにつれて、さまざまなデバイスやブレークポイントを設計するときに、レイアウトをカスタマイズできるという利点があります。

この記事は、もともと2016年8月3日に公開されました。最終更新日は、2017年12月6日です。