CSS grid-template-columns 屬性

定義和用法

grid-template-columns 屬性規定網格布局中的列數（和寬度）。

這些值是一個用空格分隔的列表，其中每個值指定相應列的尺寸。

另請參閱：

CSS 教程：CSS 網格布局

CSS 參考手冊：grid-template-rows 屬性

CSS 參考手冊：grid-template 屬性

實例

例子 1

制作四列的網格容器：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

親自試一試

例子 2

制作一個四列的網格布局，并規定每個列的尺寸：

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

親自試一試

CSS 語法

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

屬性值

值 描述
none 默認值。在需要時創建列。
auto 列的尺寸取決于容器的大小以及列中項目內容的大小。
max-content 根據列中最大的項目設置每列的尺寸。
min-content 根據列中最小的項目設置每列的尺寸。
length 設置列的尺寸，通過使用合法的長度值。參閱長度單位。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

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

瀏覽器支持

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

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