网格布局中常用的函数

repeat

该函数帮助我们创建重复的数值,第一个参数为重复的次数，第二个参数为重复的轨道列表,如我们想创建1个6列的网格布局，其中除了首列和尾列宽度为10px，中间每列的宽度都为50px,可以使用以下代码

.grid-container{
    display: grid;
    grid-template-columns:10px repeat(3,50px) 10px
 }

repeat函数第一个参数的特殊取值

auto-fill 和 auto-fit

auto-fill和auto-fit常常于minmax函数一起使用，如

repeat(auto-fit,minmax(80px,1fr))表示让浏览器根据容器宽度自动填充轨道大小，最小宽度为80px，当填充完轨道后，假如有剩余宽度，将调整轨道大小，平均分配到每个轨道上。如

我们设置了容器宽度为500px,一共有4个项目，每个项目的宽度为80px，由于4x80=320,小于500,因此浏览器将剩余宽度平均分配给每个容器，180/4=45,80+45=125。因此每个项目的宽度为125px.

repeat(auto-fill,minmax(80px,1fr))表示让浏览器根据容器宽度自动填充轨道大小，最小宽度为80px，当填充完轨道后，假如有剩余宽度，保留空白轨道,即轨道大小为设置的大小，这里为80px。如

minmax

此函数包含两个参数，最小值 和 最大值.

每个参数分别是<length>、<percentage>、<flex>的一种，或者是max-content、min-content、或auto之一。

如果 最大值 < 最小值，则最大值被忽略并且 minmax(最小值, 最大值) 被看成最小值。<flex> 值作为最大值时设置网格轨道的弹性系数；作为最小值时无效。

如我们希望网格布局的行高最小为100px, 最大可以跟着项目的内容自适应，则可以用以下代码

.grid-container{
    display: grid;
    grid-template-columns:10px repeat(3,50px) 10px;
    grid-auto-rows:minmax(100px,auto)
 }

网格线与命名网格线

上面代码设置了一个两列的网格布局，会默认产生3条竖向的网格线，其名字默认为1，2，3。我们也可以为其命名，代码如下：

.grid-container{
    display: grid;
    grid-template-columns:[one] 50% [two] 30% [three];
 }

其中[one] [two] [three]即为命名的网格线，中括号中可以是任意的名称。网格线的使用在后面讲项目属性的时候会用到。一个网格线可以定义多个名字,名字中间由空格隔开，如[one theFirstLine]

如果一个某个网格布局中的某个区域的线都用-start或-end结尾，这该区域就会默认有一个名字，名字为-start或-end的前缀，如


.grid-container {
   display: grid;
   grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
   grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}

这段代码定义了一个三行三列的网格布局，第二列和第二行的名字为content-start,第三列和第三行的名字为content-end，这几条线围成的区域，即第5个项目代表的区域的名字为content。

命名区域与命名网格线

当一个区域被命名后，网格布局会隐式地为包括该区域的网格线命名，如

.grid-container{
  display: grid;
  height: 100%;
  grid-template-areas: "hd hd hd"
                       ". content ."
                       "ft ft ft";
  grid-template-columns: 150px 1fr 150px;
  grid-template-rows: repeat(3,1fr);
}

我们定义了一个三行三列的网格布局，默认横向的网格线的命令为1 2 3，竖向的网格线命名也为1，2，3。由于我们为一些区域进行了命名，因此会为网格线默认命名，横向1拥有名字[hd-start],横向2拥有名字[content-start header-end],横向3拥有名词[content-end ft-start],横向4拥有名字[ft-end]，竖向1拥有名字[hd-start ft-start],竖向2[content-start]，竖向3拥有名字[content-end]竖向4拥有名字[hd-end ft-end]。此时假如我们想定义一个包裹2 5 8 项目的轨道区域，可以使用以下代码

<style>
.gird-item{
 grid-area: hd-start / content-start / ft-end /content-end;
 backgroud: #000;
}
</style>

使用repeat创建多条具备相同命名的网格线

看下面代码

  .grid-container {
      display: grid;
      grid-template-columns: repeat(12, [col1-start] 1fr);
      grid-auto-rows: 50px;
    }

我们定义了一个具备12列均等分隔的网格布局，同时将每个项目的竖向开始网格命名为col1-start。在为具体的项目指定区域时，就可以通过"网格线名编号"来指定从“第几条”命名网格开始到结束。如

.grid-item{
    grid-column: col1-start 2 / col1-start 3
}

指定该项目从第二条命名为col1-start的竖向网格线开始到第三条结束。结束位置也可以通过span来指定，上面代码可以变更为

.grid-item{
    grid-column: col1-start 2 / span 1
}

span后还可以加结束线的名称，从起始线开始的位置，跨域“多少个”结束线的位置，如

.grid-item{
    grid-column: col1-start 2 / span 2 col1-start
}

表示从第二条col1-start竖线开始，到往后数的第二条col1-start线结束

匿名网格框

标准中还提到了匿名网格项目。当有一些字符串或文本被包含在网格容器中，但却没有被其他元素包装，它们就会被创建为匿名网格项目。下面的例子，假设容器的类 grid 设置了 display: grid 属性，那么网格中就有三个网格项目，第一个就是匿名项目，因为它没有用标签分隔，所以会被自动定位规则处理。另 2 个放在 div 中的项目，它们可以被自动定位，也可以通过网格的定位属性来定位。

<div class="grid-container">
 这是被包含在网格容器中的一段文本，它会成为匿名网格框,也是一个项目。
 <div>这是项目2</div>
 <div>这是项目3</div>
</div>

网格布局所支持的单位

网格布局（Grid Layout）支持以下单位：

fr：fr全称为fraction,表示可用空间的分数，通常用于定义弹性布局。

比如我们想创建一个两列的网格布局，并且第一列占父元素宽度的1/3,第二列占父宽度的2/3。可以使用以下代码

.grid-container{
    display: grid;
    grid-template-columns:1fr 2fr;
 }

%：表示相对于父元素宽度的百分比。
px：表示像素单位，通常用于固定宽度的布局。
em 和 rem：表示相对于父元素或根元素的字体大小的倍数。
auto：表示自动计算宽度或高度。
min-content：表示元素的最小内容尺寸。
max-content：表示元素的最大内容尺寸。
fit-content：表示元素的适合内容尺寸。

css网格布局之常用技巧篇