CSS3で12カラムグリッドレイアウト

CSS3で12カラムグリッドレイアウト

grid-template-columnsプロパティを使用して12カラムグリッドを設定し、要素を自由な位置にレイアウトします。

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

grid-template-columnsで12カラムを作成

repeat()を使って親要素を12カラムに指定します。

repeat(12, 1fr);を任意の数字にすればその数に分割することもできます。
repeat(3, 1fr); こうすれば3分割されます。

子要素の位置を自由に設定

12分割に指定した親要素の中に子要素を配置します。
grid-column で自由に子要素のレイアウトが可能です。
grid-column: 2 / span 9; 2行目から9カラム
grid-column: 7 / span 3; 7行目から3カラム

サンプルコード

ブラウザ上で表示した結果

child-span-a
child-span-b
child-span-c