備忘録的プログラミングリファレンス

grid-templateプロパティ

 grid-templateプロパティは、display:grid;によるエレメント(グリッドコンテナ)の子エレメント(グリッドアイテム)の並び数やサイズを指定するプロパティです。

 grid-templateプロパティは、以下のプロパティを一括で指定することができます。

例:グリッドアイテムを列方向に3つ並べて、それぞれを20%、60%、20%とし高さを自動設定
.grid_container{
  display: grid;
  grid-template: 20% 60% 20% / auto;
}

構文(Syntax)

CSS

grid-template: none | [ grid-template-rows / grid-template-columns ] | grid-template-areas | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.gridTemplate;
値の設定
object.style.gridTemplate=" none | [ grid-template-rows / grid-template-columns ] | grid-template-areas | initial | inherit ";

Values

Value摘要
none初期値(default値)
grid-template-rows行(縦)方向の並び数やグリッドアイテムの高さを定義
grid-template-columns列(横)方向の並び数やグリッドアイテムの幅を定義
grid-template-areas領域名を並べることでレイアウト
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)none none none
継承(Inherited)No
CSS AnimationYes