前言
这里是本人学习时简单记录的笔记,可供参考,学习GRID网格请直接查看MDN原文链接.
网格系统真强大!!!强大的东西,学起来也激动,轻松实现强大的布局
CSS Grid Layout是用于Web的二维布局系统。 它使您可以按行和列对内容进行布局,并具有许多使构建复杂布局简单明了的功能。 本文将为您提供开始布局页面所需的全部知识。
什么是网格布局?
网格是水平线和垂直线的集合,创建了一个图案,我们可以在该图案上排列我们的设计元素。 它们可以帮助我们创建设计,使元素在页面之间移动时不会跳动或改变宽度,从而提高了网站的一致性。网格通常具有列,行,然后在每一行与列之间留有空隙(通常称为装订线)。
创建你的第一个网格系统
确定了设计所需的网格后,可以使用CSS Grid Layout在CSS中创建该网格并将项目放置到该网格上。 我们将首先查看Grid Layout的基本功能,然后探讨如何为您的项目创建简单的网格系统。定义一个网格
使用网格之前:
要定义网格grid,我们使用display属性的网格值grid。 与Flexbox一样,这会打开“网格布局”,并且容器的所有直接子级都将成为网格项。 将此添加到文件内的CSS中:
.container {
display: grid;
}
与flexbox不同,这些网格项目不会立即看起来有所不同。 声明display:grid网格会为您提供一列网格,因此您的项目将像在正常流程中一样继续在另一个项目下方显示。
要查看看起来更像网格的内容,我们需要在网格中添加一些列,让我们在这里添加三个200像素的列。 您可以使用任何长度单位或百分比来创建这些列,效果如下面所示,每一列都是200px的宽度
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
}
固定宽度网格项目效果分析:
固定网格项目宽度或许不会铺满网格盒子
固定网格项目的高度撑开了就是网格盒子的高度
带有fr单元的柔性网格
除了使用长度和百分比创建网格外,我们还可以使用fr单位灵活调整网格行和列的大小。 该单位代表网格容器中可用空间的一小部分。
柔性网格按照比例排列网格:
将您的tracks轨道列表更改为以下定义,创建三个1fr tracks。(这里的tracks用词非常准确,一条轨道分成多个部分)
.container {
display: grid;
border: 1px solid red;
/*grid-template-columns: 200px 200px 200px;*/
grid-template-columns: 1fr 1fr 1fr;
}
柔性网格项目效果分析:
柔性网格会自动按照比例铺满网格盒子
网格项目的高度撑开了网格盒子的高度
该网格比例是1:1:1
现在,您应该看到自己拥有灵活的轨道。 fr单位按比例分配空间,因此您可以给tracks赋予不同的正值,例如,如果您像这样更改定义:
display: grid;
border: 1px solid red;
/*grid-template-columns: 200px 200px 200px;*/
grid-template-columns: 2fr 1fr 1fr;
柔性网格项目效果分析:
该柔性网格系统的列比例是:2:1:1
设置网格之间的间隙
为了在轨道之间创建间隙,我们使用属性grid-column-gap来设置列之间的间隙,使用grid-row-gap来设置行之间的间隙,并使用grid-gap来同时设置两者。
这些间隙可以是任何长度单位或百分比,但不能是fr单位。
重复单个轨道
重复轨道写法与按比例实现相同的效果,写法更为简单您现在将像以前一样获得3个1fr曲目。 传递给repeat函数的第一个值是您希望列表重复的次数,而第二个值是曲目列表,可以是您想要重复的一个或多个曲目。
.container {
display: grid;
border: 1px solid red;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
==
.container {
display: grid;
border: 1px solid red;
/*grid-template-columns: repeat(3, 1fr);*/
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
重复多个轨道
.container {
display: grid;
border: 1px solid red;
grid-template-columns: repeat(3, 1fr 2fr);
/*grid-template-columns: 1fr 1fr 1fr;*/
grid-gap: 20px;
}
效果分析:
重复多个轨道是将轨道进行两次划分,假设第一次划分为x个,那么第二次划分为y个,总的轨道个数就是x*y个,样式也进行了重复
隐式网格
默认情况下,在隐式网格中创建的轨道是自动调整大小的,这通常意味着它们足够大以适合其内容。 如果希望给隐式网格轨迹指定大小,则可以使用grid-auto-rows
和grid-auto-columns属性。 如果向CSS添加值为100px的grid-auto-rows,您将看到这些创建的行现在高100像素
.container {
display: grid;
border: 1px solid red;
grid-template-columns: repeat(3, 1fr);
/*grid-template-columns: 1fr 1fr 1fr;*/
grid-gap: 20px;
/*设置网格的高度,如果内容放不下会导致溢出*/
/*grid-auto-rows: 100px;*/
}
如果我们向高于100像素的轨道中添加内容,则100像素高的轨道将不会非常有用,在这种情况下,这会导致溢出:
使用minmax()函数,我们可以为轨道设置最小值和最大值,例如minmax(100px,auto)。 最小尺寸为100像素,但最大为自动,它将自动扩展以适合内容。 尝试更改grid-auto-rows以使用minmax值(最大值自动的设置避免了内容溢出):
尽可能多的以某一个宽度平铺
有时,能够要求网格创建适合容器的列数会很有帮助。 我们通过使用repeat()表示法设置grid-template-columns的值来做到这一点,但不要传入数字,而是传入关键字auto-fill。 对于函数的第二个参数,我们使用minmax(),其最小值等于我们想要的最小轨道大小,最大值为1fr。
之所以行之有效,是因为网格正在创建200个像素的尽可能多的列,然后将其容纳到容器中,然后在所有列之间共享剩余的空间-最大值为1fr,我们已经知道,它在轨道之间平均分配空间。
网格线
没有使用网格布局之前:
我们将使用网格线将网站的所有元素放置在网格上。 将以下规则添加到CSS的底部:
使用网格线之后效果非常好看:
grid-template-areas
属性,以及网格框架可以实现类似的效果…(略)