🌎 Grid

線(gutter):アイテム間の間隔=>外とアイテム間にも
(1から)

item:各itemを処理する

content:各itemを含むすべてを表す

gridは横を最大に伸ばし、横を最大に伸ばしたい
(pxが存在する場合は、このpxと同様に横径を最大限に増やし、縦径を最大限に減らす.)

指定されていない場合は、デフォルトはspan 1です.
row-startが2でrow-endがspan 2の場合、展開される領域は2 3 4のブロック2領域である.
(既定では、1つの領域は2,3にのみ展開されます)

コンセプトアレンジ

videfy->水平(行)
align->垂直(列)

stretchから成長の方向が見えます
正の水平延伸、整列垂直延伸.

可変長:ブラウザのスケールによって影響される1 fr
固定長さ:ブラウザのスケールの影響を受けない~px

🌕 Gridコンテナ属性

display

grid-template-rows

grid-template-columns

grid-auto-rows

grid-auto-columns

grid-auto-flow

正当性-内容:水平(行)ソート

(大容器全体の概念)

align-content:大きな容器全体の概念から見た垂直(列)ソート

prevident-items:

をプロジェクトコンセプトのレベル(行)でソート

align-items:プロジェクトコンセプト別に表示される垂直(行)ソート

grid-template-areas

grid-gap

1. display

grid

inline-grid

各コンテナは、行または列によって区分する

である.

2. grid-template-rows

3. grid-template-columns

明示的な指定

1 pxまたは1 frの使用

fr (fraction)

スペーススケール(Space Scale):塗りつぶし全体の役割を果たします.
コンテンツ1 fr 1 fr 1 fr...代わりにrepeat(횟수 , 1fr)形です.

4. grid-auto-rows

5. grid-auto-columns

暗黙的にターゲットを指定

明確に指定された部分またはそれ以上のターゲットの役割を処理します.
9個のtemplate-rowsが2個のtemplate-columnsを処理し、
さらに5つの暗示的な処理対象がある.

暗黙的な行のサイズが明示的な行の外にある
(grid-rowで明示的から暗黙的に変更することもできます.)

6. grid-auto-flow

密集型:空白を埋め、

に並べ替えます.

row(デフォルト):行軸ベース

列:

を列軸で積み上げる

column dense

7. justify-content

normal

start

end

center

space-between

space-around

space-evenly

による主軸(行軸)処理

8. align-content

normal

start

end

center

space-between

space-around

space-evenly

の交差軸(列軸)に基づく

の処理

vided-content/align-コンテンツプロパティ

containerを基準に空きスペースがある場合に適用します.

9. justify-items

normal

start

end

center

行で各項目の空き領域をソート

10. align-items

normal

start

end

center

列で各項目の空き領域をソート

content/items(重要)

videf-content,align-content:コンテナサイズの幅に応じてアイテムを処理
videf-items,align-items:各プロジェクトのサイズ幅に基づいてプロジェクトを処理する

qualified-items/align-items特性

グリッド領域に複数のセルがあり、1つのセルのitemがセルの空白より小さい場合は、ソート時に使用します.
containerがすべて1 frに増大し、item間にpxの項目間の空白がある場合、この部分をprevity-itemsとalign-itemsに調整できます.

すべてが中間に適用される例

11. grid-template-areas + grid-area

"a b c "

"d e f "

". . f "

「a b d」形状

• 
  

  ""行を分割します.処理.が実行しない箇所

  
  
• 
  

  コード実行前のターゲットラベルにgrid-areaを適用します.
  
  ( .container header { grid-area : a; } )

  
  

11.12適用例