CSSグリッドをご存知ですか?

─
CSSのグリッドは、私たちにグリッドを作成し、Webページ上に配置する能力を余裕の2次元レイアウトのスタイルですが、それはまた、グリッド内の要素を挿入し、我々が望むように要素を配置する能力を与える.これは、2つの方向が列を下に来ると行が横切っている.
別の列と複数の行を持つ複雑なWebデザインを作る最も簡単な方法はCSS Flex Gridです.それはCSS Flexboxより優れています、しかし、両方とも同じウェブ設計プロジェクトで使われることができます.
─
最初のものは、divまたは要素をグリッドに表示することによって、divまたは要素のグリッドを使用するグリッドを表示することです.
─
─
上記のマークアップをグリッドにするには、ディスプレイのグリッドをコンテナのクラスでdivに追加します.これは、Webページ上の要素のレイアウトを変更しません.
─
─
グリッド内で必要な列の数を指定するには、非常に簡単に達成することですあなたは1つ、2つ、3つまたは4つの列を持つことを決定することができます.
─
─
上記のコードでは、コンテナーは、それぞれの私たちは各列を異なった幅にすることができます.
200 px 4倍の使用を繰り返しているので、上のスニペットのコードをより魅力的にするために、グリッド関数列をリピート機能を使用して下のコードに設定できます.
─
繰り返し関数の中の最初のパラメータは反復の数を定義し、2番目は繰り返し何を表しますしかし、あなたのウェブサイトを設計することは、ピクセルの割合を指定する代わりに、デザインの中心的な部分であるか、パーセンテージで、CSS Gridの応答単位です.
分数単位は、グリッドコンテナの空き領域を計算します.
─
─
結果からわかるように、1列目、3列目、4列目に1 frの値があり、2 frが2列目の値として設定されましたFR単位で繰り返し機能を使用することもできます.
─
グリッドテンプレート列と同様に、グリッドテンプレート行は、主にグリッドコンテナの高さと行の数を定義するために使用されます.
─
─
グリッドプロパティ、グリッドオート行は、サイズが最初に設定されていないときに行に影響を与えます.
─
─
先に述べたように、グリッドオート行は、行が最初に設定されていない場合はグリッドコンテナーに影響を与えるだけですが、行が設定されている場合は何の効果もありません.
─
グリッドオート行を上記のように設定すると、固定された高さを設定しているため、要素内のコンテンツがオーバーフローしがちですこの現象を防ぐためにminmax ()という機能があります.
─
CSSグリッドに埋め込まれたMinMax関数は、必要に応じて列と行の両方の値を設定できます.この関数は、その名前から推論できる最小値と最大値の2つの値をとります.
─
上記のコードは、グリッドテンプレート行が最小行の値を100 pxに設定し、最大値autoを設定するminmax ()で設定されていることを示します.
─
─
ギャップを使ってCSSグリッドに列と行のギャップやスペースを追加できます.
─
gapプロパティが10 pxに設定されている場合、カラムと行の間隔は10 pxです.
─
CSSのグリッドを使用すると、任意の行または列にアイテムの位置を変更することが可能です.あなたが望むように、文字通りあなたのレイアウトを変えることができるように、私にとって、これは格子がFlexboxを上回る理由です.
─
グリッドの列は、列の軸に沿って項目をスパンに使用されますこのプロパティを使用すると、便利にグリッド内の任意の場所にアイテムを配置することができます.
─
上記のコードから分かるように、グリッドの列プロパティが設定されます.B 0 X - 1は1行目から始まり、6列グリッドの7行目で終わります.
─
─
このプロパティはグリッド列に似ていますが、列で作業する代わりに、グリッドプロパティグリッド行が行になります.
これは、レイアウト内の任意の行に項目を配置するために使用されます.
─
上記のコードは.BOX - 1で行1と4行目から開始します.
─
これはCSSグリッドで最も興味深いプロパティの1つですが、このプロパティを使用すると、グリッド上の領域に特定の名前を与えることによって、あなたのレイアウトを構成し、再構成することができます.
─
─
上記の結果はグリッドテンプレート領域がグリッドコンテナに設定され、各行がアポストロフィ('')または引用符(“”)で定義されていることを示します.
─
上記のコードに基づいて、グリッドテンプレート領域が設定された後に、次のステップは、メイン、セクション、脇、フッタータグよりも、この場合のグリッド項目に処理され、グリッド領域を適切に設定します.
上記の結果で生成されたコードについては、次を参照してください.
─
─
これは、行軸に沿ってグリッド内の項目を整列するために使用されます正当化項目は、ストレッチの既定値を持っていますが、開始、終了、および中央のような3つの他の値を持ちます.
─
項目を正当化するのと同様ですが、列軸に沿ってグリッド内の項目を整列させるのに使用されます正当化項目は、ストレッチの既定値を持っていますが、開始、終了、および中央のような3つの他の値を持ちます.
─
主にグリッドサイズがグリッドコンテナーより小さいとき、正当化内容は主に使用されます、したがって、プロパティは格子軸にグリッド内容を置くのに用いられます.
このプロパティはstartの既定値を持ちますが、ストレッチ、センター、エンド、スペース、スペース、スペースを均等にします.
─
コンテンツを正当化するように、グリッドのコンテナーが固定の高さを持っているときに主にコンテンツを整列させるため、プロパティを使用してグリッドのコンテンツを列軸に配置します.
このプロパティは、ストレッチの既定値を持ちますが、開始、中心、終了、スペースの周り、スペース間、および均等に均等になります.
─
列の軸に沿って項目を揃えるのに使用されるように、Align - selfは格子子供自身で使用されます.
─
それが行軸に沿って項目を整列させるのに用いられるので、正当化自己は格子子供自身で使用されます.
─
─
これは、人気のCSSグリッドのクイックラウンドダウンです、そして、あなたはこの記事が役に立つと思います.