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

今すぐ入手 →

#grid-template

grid-template-rows、grid-template-columns、grid-template-area の shorthand プロパティです。

デフォルト grid-template: none;

行、列、領域は定義されていません。

grid-template: 200px 1fr / 100px auto 3rem;

スラッシュ/で区切ることで、先に行、次に列を定義できます。

grid-template: "header header header" 50px "sidebar main main" 200px / 100px auto;

領域と行、列のサイズを両方定義できます。この場合、各領域セットには行サイズが付けられています。最初の行の高さは50px、2番目の行の高さは200pxです。サイドバー列の幅は100pxで、メイン列の幅はautoに設定され、残りの幅を占めます。