CSS grid-template-columns 屬性
示例
建立一個 4 列的網格容器
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
自己動手試一試 »
定義和用法
grid-template-columns 屬性指定網格佈局中列的數量（和寬度）。
值是以空格分隔的列表，其中每個值指定相應列的大小。
| 預設值 | none |
|---|---|
| 繼承 | no |
| 可動畫 | 是。 閱讀有關可動畫屬性的內容 嘗試一下 |
| 版本 | CSS Grid Layout Module Level 1 |
| JavaScript 語法 | object.style.gridTemplateColumns="50px 50px 50px" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| grid-template-columns | 57 | 16 | 52 | 10 | 44 |
CSS 語法
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| none | 預設值。如果需要，則建立列 | 演示 ❯ |
| auto | 列的大小由容器大小和列中項的內容大小決定 | 演示 ❯ |
| max-content | 將每列的大小設定為依賴於列中的最大項 | 演示 ❯ |
| min-content | 將每列的大小設定為依賴於列中的最小項 | |
| length | 設定列的大小，使用合法的長度值。 閱讀有關長度單位的內容 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
建立一個 4 列的網格容器，併為每列指定一個大小
.grid-container {
display: grid;
grid-template-columns: 30px 200px auto 100px;
}
自己動手試一試 »
相關頁面
CSS 教程: CSS Grid 佈局
CSS 參考：grid-template-rows 屬性
CSS 參考：grid-template 屬性
