新着！私の44ページの電子書籍「CSS in 44 minutes」が発売されました！ 😃

今すぐ入手 →

#grid-auto-columns

暗黙的に作成されたグリッド列のサイズを定義します。つまり、grid-auto-columnsは、grid-template-columnsまたはgrid-template-areasで定義されていない列を対象とします。

デフォルト grid-auto-columns: auto;

暗黙的に作成された列は、autoサイズになります。

grid-auto-columns: 100px;

ここでは、grid-template-areas: "header header header" "sidebar main main"とgrid-template-columns: 50px 200pxを組み合わせています。

この状況では、grid-template-areasは3列を定義しますが、grid-template-columnsは2列の幅しか定義していません。

その結果、3列目の幅はgrid-auto-columnsプロパティの値、つまり100pxになります。