デザインのモックアップを一致させるためのいくつかのCSSグリッド戦略

Web開発の世界は、設計から開発へのハンドオフの間に常にギャップがありました。野心的なデザイナーは、ユニークで美しく見える（そして彼らの最初のビジョンに忠実である）彼らの努力の最終結果を望んでいますが、多くの開発者は一貫性があり、信頼性があり、堅実な（そして簡単にコードしやすい（そして簡単にコード）、結果にもっと価値があります。このダイナミクスは、両側の間で持続的な緊張をもたらす可能性があり、両当事者は自分の方法で物事を操縦しようとしています。

この状況はある程度避けられませんが、新しいフロントエンドテクノロジーは、両側をより近づける役割を果たすことができます。そのような技術の1つはCSSグリッドです。この投稿では、デザインレイアウトを高度な忠実度に一致させるCSSスタイルを作成するために使用する方法について説明します（頭痛のない！）。

デザイナーがフロントエンド開発者に指示を与える一般的な方法は、デザインモックアップを使用することです（Mockupsによって、Sketch、XD、Illustrator、Photoshopなどに組み込まれた成果物について話しています）。すべてのデザイナーは、ある程度（開発者と同様に）ある程度は異なって作業していますが、多くの人はレイアウトの構造を何らかのグリッドシステムに基づいてベースにしたいと思っています。一貫したグリッドシステムは、ユーザーの画面のサイズがモックアップと異なる場合に、Webページのコーディング方法と応答する方法を伝えるために非常に貴重です。開発者として、よく考え抜かれたグリッドシステムを採用するのに苦労してくれたデザイナーに本当に感謝しています。

12列のレイアウトは特に人気がありますが、他のパターンも一般的です。 SketchやXDなどのソフトウェアにより、プリセットの列レイアウトに続くページを作成すると、ボタンをクリックするだけでオーバーレイのオンとオフを切り替えることができます。

グリッドシステムが実装されると、ほとんどの設計要素はその中に正面に配置する必要があります。このアプローチにより、形状が均等に並んでいることを保証し、より魅力的な外観になります。視覚的に魅力的であることに加えて、予測可能なグリッドは、開発者がスタイルを書くときに撮影する明確なターゲットを提供します。

残念ながら、この基本的なパターンは、正確にコーディングするのが一見困難です。ブートストラップのようなフレームワークは、グリッドレイアウトを作成するためによく使用されますが、ページの重量が追加されたり、細粒のコントロールが不足しているような欠点があります。 CSSグリッドは、フロントエンドの完璧主義者にとってより良いソリューションを提供します。例を見てみましょう。

上記のデザインは、グリッドに適したアプリケーションです。 14列のパターンがあり、複数の要素がその中に配置されています。ボックスはすべて異なる幅とオフセットを持っていますが、それらはすべて同じグリッドに付着しています。このレイアウトは、FlexBox、さらにはフロートでも作成できますが、すべてのブレークポイントでピクセルに最適な結果を得るために非常に具体的な数学が含まれる可能性があります。それに直面しましょう。多くのフロントエンド開発者はその忍耐を持っていません。この種の作業をより簡単に行うための3つのCSSグリッドレイアウト戦略を見てみましょう。

戦略1：基本的なグリッド

均等に間隔を空けた12列のレイアウトを書く最も直感的な方法は、おそらくこれのある程度のバリエーションでしょう。ここでは、外側の容器を使用して、左右のパディングを備えた外側の溝間隔を制御し、内側の列要素を使用して、コンテンツを最大幅に抑制します。行は、グリッド固有のスタイリングを受け取ります。

ディスプレイ：グリッド;
Grid-Template-Columns：Repeat（12、1Fr）;
グリッドギャップ：20px;

このルールでは、グリッドが12列で構成されると定義されており、それぞれが1つの分数単位（FR）の幅があります。列間の20pxのギャップも指定されています。列テンプレートセットを使用すると、Grid-Columnプロパティを使用して、任意の子列の開始と終了を非常に簡単に設定できます。たとえば、グリッドコラムを設定します：3/8は、その要素を列3で開始し、列8に5つの列を及ぼす要素を位置付けます。

この1つの例では、CSSグリッドが提供するものにはすでに多くの価値を見ることができますが、このアプローチにはいくつかの制限があります。 1つの問題は、Grid-GapプロパティをサポートしていないInternet Explorerです。もう1つの問題は、この12列のアプローチが、ギャップの最後に列またはギャップの開始時に列を起動する機能を提供しないことです。そのためには、別のシステムが必要です。

戦略2：より柔軟なグリッド

Grid-GapはIEの場合はノーグアーである可能性がありますが、グリッドテンプレート自体の一部としてスペースを含めることにより、ギャップの外観を再現できます。 Grid-Template-Columnsが利用できるリピート関数は、引数として単一の列幅だけでなく、任意の長さの繰り返しパターンを受け入れます。この目的のために、列からギャップのパターンを11回繰り返すことができ、最終列を挿入して、12列 / 11のインテリアギャップレイアウトを完了することができます。

 Grid-Template-Columns：繰り返し（11、1FR 20px）1FR;

これにより、IEの問題が発生し、列を開始および終了することもできます。以前の方法よりも素晴らしい改善である一方で、成長する余地がまだあります。たとえば、列が画面の外側の端に及ぶ片側で配置され、もう一方がグリッドシステムに適合した場合はどうなりますか？これが例です：

このレイアウトでは、カード（左列）がグリッド内で開始および終了します。メイン画像（右の列）もグリッド内で始まりますが、グリッドを越えて画面の端まで伸びています。これのためにCSSを書くことは挑戦です。 1つのアプローチは、画像を絶対に配置して右端に固定することですが、これにはドキュメントフローからそれを取り出すという欠点が付いています（これは、画像がカードよりも高い場合は問題になる可能性があります）。別のアイデアは、フロートまたはフレックスボックスを使用してドキュメントフローを維持することですが、これは幅と間隔を適切に取得するために、いくつかのトリッキーな1回限りの計算を伴います。より良い方法を見てみましょう。

戦略3：さらに柔軟なグリッド

この手法は、最後の改訂で導入されたアイデアに基づいています。これで、溝のサイズと列の幅を定義する他の要素内にグリッドを存在させる代わりに、それらのスペースをグリッドのパターンと統合しています。溝、柱、ギャップはすべてテンプレートに組み込まれているため、グリッドカラムプロパティを使用して、子どもの要素をグリッド上に簡単かつ正確に配置できます。

 $ row-width：1140px;
$ガター：30px;
$ギャップ：20px;
$ break：$ row-width 2 * $ gutter;
$ col-width-post-break：（$ row-width-11 * $ gap） / 12;
  
。容器 {
  ディスプレイ：グリッド;
  Grid -Template -Columns：$ Gutter Repeat（11、calc（（100％-2 *＃{$ gutter} -11 *＃{$ gap}）/12）＃{$ gap}）calc（（100％ -  2 *＃{$ gutter} -11 *＃{$ gap}）/12）$ gutter;
  @mediaスクリーンと（min-width：＃{$ break}）{
    Grid-Template-Columns：calc（0.5 *（100％ - ＃{$ row-width}））repeat（11、＃{$ col-width- post-break}
  }
}

はい、これを適切に取得するためにいくつかの数学が必要です。行の最大幅が実現する前後に、テンプレートを異なる方法で設定することが重要です。変数を定義することで計算をより管理しやすくすることができるため、このためにSCSSを使用することを選択しました（他の開発者にとって読みやすいことは言うまでもありません）。 12部のパターンとして始まったものは、11のインテリアギャップの統合により23部のパターンに成長し、現在では左右の溝を占める25個の作品になりました。

このアプローチのクールなことの1つは、パターンが設定された後にグリッドに付着するレイアウトの基礎として使用できることです。さらに、高品質のモックアップで伝えられる可能性が高いデザインを正確に実装する簡単な方法として機能します。それは、開発者とデザイナーの両方を幸せにするべきものです！

いくつかの注意事項があります…

これらのテクニックは、伝統的に厄介なスタイリングの問題をクラックするために使用できますが、それらは銀の弾丸ではありません。代わりに、適切なアプリケーションに使用する代替ツールと考える必要があります。

2番目と3番目のレイアウトパターンが適切でない状況の1つは、自動配置を必要とするレイアウトです。もう1つは、CSSグリッドでうまく再生されないブラウザをサポートする必要がある生産環境です。

以上がデザインのモックアップを一致させるためのいくつかのCSSグリッド戦略の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。