grid布局介绍（容器、项目、网格线、单元格、容器和项目属性template-columns|rows相关函数和相关关键字\gap\areas\flow\content\justify\align）

最新推荐文章于 2024-04-27 13:18:18 发布

YF-SOD

最新推荐文章于 2024-04-27 13:18:18 发布

阅读量1.2k

点赞数 3

分类专栏： CSS 文章标签： grid布局详解 grid的相关函数、关键字 grid布局项目属性详解 grid布局容器属性详解 grid布局相关概念详解

本文链接：https://blog.csdn.net/AIWWY/article/details/118269527

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

与display:inline-grid区别

容器的属性

grid-template-columns、grid-template-rows属性

grid-template-columns|rows的相关函数

repeat()

minmax()

grid-template-columns|rows的相关关键字

grid-row-gap、grid-column-gap 属性

grid-gap属性

grid-template-areas 属性

grid-auto-flow 属性

justify-items、align-items 属性

place-items属性

justify-content 、align-content 属性

place-content属性

grid-auto-columns、grid-auto-rows 属性

grid-template 属性

grid 属性

项目属性

grid-column-start|end 、grid-row-start |end 属性

span关键字

grid-column、grid-row 属性

grid-area 属性

justify-self 、align-self 属性

place-self属性

grid布局介绍

Grid 布局是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格

grid布局相关概念介绍

容器和项目

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

上面代码中，最外层的div元素就是容器，内层的三个div元素就是项目。注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的p元素就不是项目。Grid 布局只对项目生效。

`行和列`

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

上图中，水平的深色区域就是"行"，垂直的深色区域就是"列"。

`单元格`

行和列的交叉区域，称为"单元格"（cell）。

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

`网格线`

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。

`display:grid`

将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。注意设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

`与display:inline-grid区别`

grid：将对象作为网格布局显示，当该对象没有设置宽度时，默认是父集的100%。例如下图其中1~9包含在容器中，该设置了display:grid，此时容器元素为块级元素。

inline-grid：将对象作为网格布局显示，当该对象没有设置宽度时，默认是子元素的总宽和并且能自适应。例如下图，此时容器元素为内联元素。

`容器的属性`

和display:grid添加在相同元素上的。

`grid-template-columns、grid-template-rows属性`

grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。可以使用绝对值（像素）也可以使用百分比。具体如下图所示：

注意colums能确定有几列和列宽，而rows不能确定有几行，只是设置现有的行的高度，当实际项目多出时，排列的行高由项目的内容撑起。colums默认为1列，宽度占满容器的宽。rows默认由项目撑起。

`grid-template-columns|rows的相关函数`

`repeat()`

接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

grid-template-columns: repeat(2, 100px 20px 80px)和grid-template-columns: 100px 20px 80px 100px 20px 80px表示意义相同。

`minmax()`

函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值（实际上无区分）。grid-template-columns: 1fr 1fr minmax(100px, 1fr)中第三列长度为100px和1fr中绝对长度大的那一个，注意第一参数不能是fr单位的。

`grid-template-columns|rows的相关关键字`

`auto-fill 关键字`

grid-template-columns: repeat(auto-fill, 100px);

表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。

`fr 关键字`

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。例如grid-template-columns: 150px 1fr 2fr;表示第一列宽度为150px，剩余的长度按1:2分给另外2列，无剩余长度时为0。

`auto 关键字`

auto关键字表示由浏览器自己决定长度。grid-template-columns: 100px auto 100px第二列宽度为剩余宽度。注意当搭配fr单位时，auto表示为项目内容的宽度撑起。

`网格线的名称`

rid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。例如：


grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];

上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。注意网格布局允许同一根线有多个名字，比如[fifth-line row-5]。

`grid-row-gap、grid-column-gap 属性`

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距），这些间距都是单元格之间的。注意grid-column-gap和grid-row-gap可以写成column-gap和row-gap

`grid-gap属性`

grid-gap为上面两个属性的合并写法，例如grid-gap: 20px 20px;和 grid-row-gap: 20px;grid-column-gap: 20px;表示意义相同。如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。注意grid-gap可以写成gap。

`grid-template-areas 属性`

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。例如下面代码划分为3行*3列，9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。

{
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 'a b c' 'd e f' 'g h i';
}

注意：

1.如果某些区域不需要利用，则使用"点"（.）表示即上面a~i中任意一个字符都可以替换为.来表示该区域不需要。

2.区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。比如区域名为a，则起始位置的水平网格线和垂直网格线叫做a-start，终止位置的水平网格线和垂直网格线叫做a-end。

`grid-auto-flow 属性`

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。有以下几种取值：

row（默认值）：项目按行排列，先填满第一行，再开始放入第二行。 colum：项目按列排列，先填满第一列，再开始放入第二列。 row dense："先行后列"，并且尽可能紧密填满，尽量不出现空格。 column dense："先列后行"，并且尽可能紧密填满，尽量不出现空格。

按列排列图（colum）：

当第1、2项目宽度为剩余项目宽度的2倍，总宽度为项目1加项目3的和时，按行排列（row）图（此图是为下面row-dense、colum-dense做对比）：

按行排列（row-dense）图（当第三个项目能在第一行剩余空间中容下时会插入）：

按列排列（colum-dense）图（当第4个项目在第一列的剩余空间容下时会插入）

`justify-items、align-items 属性`

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下），place-items属性是align-items属性和justify-items属性的合并简写形式。有以下几种取值：

start：对齐单元格的起始边缘。 end：对齐单元格的结束边缘。 center：单元格内部居中。 stretch（默认值）：拉伸，占满单元格的整个宽度。

下图为justify-items:start，此时项目对齐单元格的起始边缘即左对齐，宽度为自身宽度撑开（橙颜色部分），注意grid-template-columns|rows设置的值为单元格的宽或高，不是项目的。

下图为align-items:start，此时项目对齐单元格的起始边缘即上对齐，高度为自身高度撑开（橙颜色部分）。

`place-items属性`

align-items属性和justify-items属性的合并简写形式。如果省略第二个值，则浏览器认为与第一个值相等。place-items: start end;和align-items:start;justify-items:end;相同意义。

`justify-content 、align-content 属性`

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。有以下几种取值

start：对齐容器的起始边框。 end：对齐容器的结束边框。 center：容器内部居中。 stretch：项目大小没有指定时，拉伸占据整个网格容器。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。 space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔。 space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

下面以justify-content属性为例，注意如果设置align-content属性，需要设置容器的高度大于每行高度的和才会有不同的效果（有剩余高度时），而设置justify时不需要是因为容器（当设置为inline-grid情况下时，也需要设置容器的宽度大于每行宽度的和才会有不同效果）本身会占满整行（这样通常会有剩余的宽度，当没有剩余宽度，变化该属性也不会有效果）：

1.start（默认）

2.end

3.center

4.stretch

5.space-around

6.space-between

7.space-evenly

`place-content属性`

place-content属性是align-content属性和justify-content属性的合并简写形式。如果省略第二个值，浏览器就会假定第二个值等于第一个值。place-content: space-around space-evenly;和align-content:space-around;justify-content:space-evenly;相同。

`grid-auto-columns、grid-auto-rows 属性`

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

如下图，前9格指定3行3列为100px，然后grid-auto-rows:50px，当8、9元素通过项目属性指定位置不在前3行是，它的高度会变为一半即50px。

grid-template 属性

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid 属性

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

项目属性

grid-column-start|end 、grid-row-start |end 属性

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线

注意

1.当只指定项目的column时，该项目还是会处于该行，且该行位于项目之前的位置会空出，之后按顺序排列（指定了row dense或column dense的不会空出，如果只指定了start或end则另一条为相邻的网格线），如下面例1。

2.当指定项目的column和row时，该项目不会有空出位置，除指定项目其它都按顺序排，如下面例2。

3.可以指定不为数字，如果指定了网格线名，可以直接使用，如果指定了区域名，例如之前定义区域有c，则可以指定值为c-start或c-end。.

当只指定column时：

.item-4 {
  background-color: #0376c2;
  grid-column-start: 2;
  grid-column-end: 3;
}

上面指定了1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。

只指定了1号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。

除了1号项目以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会"先行后列"进行排列。

效果如下：

当指定column和row时：

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

此时效果如下：

`span`关键字

表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。

例如下面代码（注释实现效果相同）：

.item-1 {
  grid-column-start: span 2;
  /*grid-column-end: span 2;*/
}

grid-column、grid-row 属性

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。注意中间要用/隔开。

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

grid-area 属性

1.指定项目放在哪一个区域，搭配容器属性grid-template-areas指定的区域名使用。

2.可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置，注意之间以/区分。

justify-self 、align-self 属性

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

有以下几种取值：

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch（默认值）：拉伸，占满单元格的整个宽度。

取值为start例子：

.item-1  {
  justify-self: start;
}

`place-self`属性

align-self属性和justify-self属性的合并简写形式。

以上部分图和部分介绍直接采用阮一峰写的，链接为CSS Grid 网格布局教程 - 阮一峰的网络日志

YF-SOD

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
grid布局介绍（容器、项目、网格线、单元格、容器和项目属性template-columns|rows相关函数和相关关键字\gap\areas\flow\content\justify\align）

目录grid布局介绍grid布局相关概念介绍容器和项目行和列单元格网格线display:grid与display:inline-grid区别容器的属性grid-template-columns、grid-template-rows属性grid-template-columns|rows的相关函数repeat()minmax()grid-template-columns|rows的相关关键字auto-fill 关键字fr 关键字auto 关.
复制链接

扫一扫