#site-map

CSS Grid Layout 活用例詰め合わせ

ウィンドウ幅に応じて列数が変わるレイアウト

  • ウィンドウ幅に応じて列数が変わる

    右下に置かれる何か
  • 長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト 右下に置かれる何か
  • テキスト
  • テキスト
  • テキスト
  • テキスト
  • テキスト

1行のときは真ん中寄せにするレイアウト

  • 1行のときは真ん中寄せ
  • テキスト
  • テキスト
  • 2行以上のときは左寄せ
  • テキスト
  • テキスト
  • テキスト
  • テキスト
  • テキスト
  • テキスト

最後の列を飛ばして並べるレイアウト

  • Step1
  • Step2
  • Step3
  • Step4
  • Step5

アイコン付きリンク

短い場合は真ん中 長い場合はアイコンの大きさを避けて配置

複雑なグリッドレイアウト

Alpha
Beta
Gamma
このセルの高さは
入るテキストの長さに
合わせる

ずらした四角を重ねるレイアウト

ずらした四角を重ねるレイアウト
smoothAnc↑.col2-4-8col
.col2-4-8col
.col2-4-8col
.col2-4-8col
.col2-4-8col
.col2-4-8col
.col2-4-8col
.col2-4-8col