CSSグリッドでレイアウトを作成します

CSSグリッド：最新のWebデザインのための強力なレイアウトツールティファニーの

CSSマスター、第2版からのこの抜粋は、2017年10月に導入された革新的なレイアウトシステムであるCSSグリッドの簡潔な紹介を提供します。 仕様の詳細は詳述されていますが、この概要は重要な概念をカバーし、詳細な学習のためのさらなるリソースを指します。

重要な概念：

CSSグリッドにより、以前に挑戦したり不可能な複雑なレイアウトを作成したりできます。 2017年10月に広範囲にわたるブラウザのサポートを得ました

要素に
• を適用すると、グリッドのフォーマットコンテキストを確立し、要素をブロックレベルのコンテナに変換し、その子供は行と列に配置されたグリッドアイテムに変換します。
• およびdisplay: gridプロパティは、スペース分離された
トラックリスト
• （例えば、長さ、パーセンテージ、grid-template-rows、grid-template-columns、）。 auto暗黙的なグリッドは、明示的に定義されたセルを超えるグリッドアイテムを自動的に処理し、コンテンツに基づいて自動サイジングにデフォルトである。 min-contentmax-content row horthandは行と列の定義を組み合わせます。
関数は繰り返しの列または行を簡素化し、
• および
は列/行カウントを動的に調整します。
• grid-templaterepeat()グリッドのフォーマットコンテキスト：auto-fitauto-fill

これらの効果でグリッドのフォーマットコンテキストをトリガーします：

要素はブロックレベルの要素になります。

子要素（またはテキストノード）は、ブロックのようなグリッドアイテムになります display: grid水平ライティングモードでは、明示的に設定されていない限り、行の高さが最も高いアイテムと一致します。垂直ライティングモードは、最長のアイテムの長さを使用します

2. は同様に動作しますが、コンテナはインラインレベルのままです。

グリッドレイアウトの定義：

display: inline-grid グリッドコンテナを定義した後、

および

を使用して行と列のカウントを指定します。 これらは、各行または列位置のグリッドライン名とサイズを定義するスペースセパートされた文字列を受け入れます。

明示的対暗黙のグリッド：

an明示的なグリッドすべてのセルを定義します。 AN暗黙的なグリッドは、グリッドを拡張して、明示的に定義されたセルを超えて追加のアイテムに対応します。 暗黙のグリッドアイテムは自動サイズで、コンテンツのフィットまたは残りのスペースの充填に拡張します。 暗黙のグリッド項目のgrid-auto-rowsおよびgrid-auto-columnsを制御するデフォルトサイズを制御しますが、minmax()を使用すると、コンテンツオーバーフローが防止されます。

フレックスユニットを備えた柔軟なグリッド（）：fr

Flexユニット（利用可能な空間の画分を表し、比例サイジングを提供します。 それらは絶対長さではなく比率であり、他の長さの単位またはfrと互換性がありません。 calc()

shorthand：

grid-templateプロパティは、簡潔さを

と

を組み合わせています。grid-template grid-template-rowsgrid-template-columns繰り返しの行と列（

）：

repeat()関数は、繰り返しパターンの作成を簡素化します：

。

およびrepeat()利用可能なスペースに基づいて繰り返しの数を動的に調整します。 repeat(number, track list)トラックサイズを調整します。 auto-fit匿名トラックを追加します auto-fillauto-fit auto-fill

さらなる学習：

これは基本的な紹介です。多くのリソースは、CSSグリッド仕様自体、レイチェルアンドリューのグリッド、例、ジェンシモンズの実験レイアウトラボ、ランドランドYouTubeチャンネル、CSS-tricks '"Gridへの完全なガイドなど、より詳細な情報を提供します。 "

結論：

CSSグリッドは強力なツールです。 この概要は、その機能をさらに調査するための基盤を提供します。

以上がCSSグリッドでレイアウトを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。