1. Web
  2. CSS
  3. grid-template-columns

grid-template-columns

Baseline 廣泛可用 *

此功能已非常成熟，可在多種裝置和瀏覽器版本上使用。自 2017 年 10 月以來，它已在各大瀏覽器中可用。

* 此特性的某些部分可能存在不同級別的支援。

CSS 屬性 grid-template-columns 定義了網格列的網格線名稱和軌道尺寸函式。

試一試

grid-template-columns: 60px 60px;

grid-template-columns: 1fr 60px;

grid-template-columns: 1fr 2fr;

grid-template-columns: 8ch auto;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

語法

css
/* Keyword value */
grid-template-columns: none;

/* <track-list> values */
grid-template-columns: 100px 1fr;
grid-template-columns: [line-name] 100px;
grid-template-columns: [line-name1] 100px [line-name2 line-name3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);
grid-template-columns: subgrid;
grid-template-columns: masonry;

/* <auto-track-list> values */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-columns:
  [line-name1] 100px [line-name2]
  repeat(auto-fit, [line-name3 line-name4] 300px)
  100px;
grid-template-columns:
  [line-name1 line-name2] 100px
  repeat(auto-fit, [line-name1] 300px) [line-name3];

/* Global values */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: revert;
grid-template-columns: revert-layer;
grid-template-columns: unset;

值

none

表示沒有顯式網格。任何列都將被隱式生成，其大小將由 grid-auto-columns 屬性決定。

[line-name]

一個 <custom-ident>，為該位置的網格線指定一個名稱。識別符號可以是除保留字 span 和 auto 之外的任何有效字串。網格線可以有多個名稱，在方括號內用空格隔開，例如 [line-name-a line-name-b]。

<length>

一個非負長度值，指定列的寬度。

<percentage>

一個非負的 <percentage> 值，相對於網格容器的行內尺寸。如果網格容器的尺寸取決於其軌道的尺寸，則瀏覽器將百分比視為 auto。瀏覽器可能會調整軌道對網格容器尺寸的固有尺寸貢獻，並可能透過最小化增加軌道的最終尺寸來滿足百分比要求。

<flex>

是一個帶有 fr 單位的非負維度，指定了軌道的彈性係數。每個 <flex> 尺寸的軌道會按其彈性係數的比例分配剩餘空間。

當出現在 minmax() 函式之外時，它表示一個自動的最小值（即 minmax(auto, <flex>)）。

max-content

是一個關鍵字，表示佔據網格軌道的網格項中最大的最大內容貢獻。例如，如果網格軌道的第一個元素包含句子“Repetitio est mater studiorum”，第二個元素包含句子“Dum spiro, spero”，那麼最大內容貢獻將由所有網格元素中最大句子的尺寸定義——即“Repetitio est mater studiorum”。

min-content

是一個關鍵字，表示佔據網格軌道的網格項中最大的最小內容貢獻。例如，如果網格軌道的第一個元素包含句子“Repetitio est mater studiorum”，第二個元素包含句子“Dum spiro, spero”，那麼最小內容貢獻將由網格元素中所有句子裡的最長單詞的尺寸來定義——即“studiorum”。

minmax(min, max)

是一個函式式表示法，用於定義一個大於或等於 min 且小於或等於 max 的尺寸範圍。如果 max 小於 min，則 max 會被忽略，該函式被視為 min。作為一個最大值，<flex> 值設定了軌道的彈性係數。它不能作為最小值。

auto

作為最大值，它代表該軌道中專案的最大 max-content 尺寸。

作為最小值，它代表該軌道中專案的最大最小尺寸（由專案的 min-width/min-height 屬性指定）。這通常對應於 min-content 尺寸，但並非總是如此。

如果在 minmax() 函式之外使用，auto 表示上述最小值和最大值之間的範圍。在大多數情況下，其行為類似於 minmax(min-content, max-content)。

備註： auto 軌道尺寸（且僅 auto 軌道尺寸）可以被 align-content 和 justify-content 屬性拉伸。因此，預設情況下，一個 auto 尺寸的軌道將佔據網格容器中的任何剩餘空間。

fit-content( [ <length> | <percentage> ] )

代表公式 max(minimum, min(limit, max-content))，其中 minimum 代表一個 auto 最小值（通常但不總是等於 min-content 最小值），limit 是作為引數傳遞給 fit-content() 的軌道尺寸函式。這本質上相當於計算 minmax(auto, max-content) 和 minmax(auto, limit) 中的較小值。

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

表示軌道列表的重複片段，允許以更緊湊的形式編寫大量具有重複模式的列。

masonry

masonry 值表示該軸應根據瀑布流演算法進行佈局。

subgrid

subgrid 值表示網格將採用其父網格在該軸上的跨越部分。網格行/列的大小將從父網格的定義中獲取，而不是顯式指定。

正式定義

初始值none
應用於網格容器
繼承性否
百分比參照內容區域的相應維度
計算值按指定值，但相對長度會轉換為絕對長度。
動畫型別由長度、百分比或 calc 組成的簡單列表，前提是唯一的區別在於列表中長度、百分比或 calc 元件的值

正式語法

grid-template-columns = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<track-list> = 
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?  

<auto-track-list> = 
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<fixed-breadth> = 
  <length-percentage [0,∞]>

示例

指定網格列尺寸

HTML

html
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

CSS

css
#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

結果

規範

規範
CSS 網格佈局模組 Level 2
# 軌道尺寸
CSS 網格佈局模組 Level 2
# subgrids

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者撰寫。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.