CSS grid-template-columns 属性-之路教程

语法

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

grid-template-column 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
        margin-top: 20px;
      }
      .example > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-columns 属性示例</h2>
    <div class="example">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

应用于 grid-container 的 grid-template-column 示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 40px 150px auto 80px;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-columns 属性示例</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

CSS grid-template-columns 属性值说明

值	描述
none	这是属性的默认值。
auto	列的大小占据了容器的大小。
max-content	每列的大小取决于列中的最大项目（item）（item）。
min-content	每列的大小取决于列中的最小项目（item）（item）。
minmax(min.max)	大小范围大于或者等于“min”，小于或者等于“max”。
<length>	列的大小由长度值指定。
<percentage>	列的大小由百分比指定。
<flex>	具有单位“FR”的非负维度，指定轨道的Flex因子。每个％26lt;柔性％26gt; - 化轨道与其Flex因子成比例地分享剩余空间。
fit-content	表示min（max-content，max（auto，参数）），它类似于auto（即minmax（auto，max-content）），但大小大于自动最小值。此值被考虑是实验性的。
repeat	表示轨道列表的重复片段，允许大量表现出以更紧凑的形式写入的重复图案的列。该值被认为是实验性的。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

CSS grid-template-columns 属性

grid-template-columns 属性定义了网格布局中每列的大小（宽度）：

初始值	none
应用于	网格容器。
继承	无效
可动画的	是的。列是可动画的。
版本	CSS网格布局模块级别1
DOM 语法	object.style.gridtemplateColumns =“40px 40px 40px”;

日期：2020-06-02 22:14:34 来源：oir作者：oir

←CSS grid-template-areas 属性

CSS grid-template-rows 属性→

语法

grid-template-column 属性示例：

应用于 grid-container 的 grid-template-column 示例：

CSS grid-template-columns 属性值说明

目录