CSS - grid-template

トップ > CSSリファレンス > grid-template

概要

属性名 grid-template
none |
[ <grid-template-rows> / <grid-template-columns> ] |
[ <line-names>? <string> <track-size>? <line-names>?]+ [ / <explicit-track-list> ]?
値の詳細 <track-size> = <track-breadth> | minmax( <min> , <max> ) | fit-content( <limit> )
<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?
<min> = <inflexible-breadth>
<max> = <track-breadth>
<limit> = <length> | <percentage>
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
<track-breadth> = <inflexible-breadth> | <flex>
<line-names> = [ <custom-ident>* ]
初期値none
適用可能要素グリッドコンテナ
継承継承しない

サポート (説明)

CSSIEEdgeFirefoxChromeOperaSafari
CSS3×1652574410.1

説明

grid-template-rowsgrid-template-columns をまとめて指定します。

使用例

CSS
.grid-container {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
}

関連項目

リンク


Copyright (C) 2019 杜甫々
初版:2019年12月30日、最終更新:2019年12月30日
http://www.tohoho-web.com/css/prop/grid-template.htm