CSS grid-template-rows 屬性

定義和用法

grid-template-rows 規定網格布局中的行數（和高度）。

值是用空格分隔的列表，其中每個值指定相應行的高度。

另請參閱：

CSS 教程：CSS 網格布局

CSS 參考手冊：grid-columns 屬性

CSS 參考手冊：grid-template 屬性

實例

規定 row-size（高度）：

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

親自試一試

CSS 語法

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

屬性值

值 描述
none 未設置尺寸。在需要時創建行。
auto 行的尺寸取決于容器的大小以及行中項目內容的大小。
max-content 根據行中的最大項目設置每行的尺寸。
min-content 根據行中的最小項目設置每行的尺寸。
length 設置行的尺寸，通過使用合法的長度值。參閱長度單位。

技術細節

默認值： none
繼承： 否
動畫制作： 支持。請參閱：動畫相關屬性。
版本： CSS Grid Layout Module Level 1
JavaScript 語法： object.style.gridTemplateRows="50px 200px"

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44