十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
通过将属性 display
的值设为 grid
,HTML 元素就可以变为网格容器。
站在用户的角度思考问题,与客户深入沟通,找到神木网站设计与神木网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、网站建设、外贸营销网站建设、企业官网、英文网站、手机端网站、网站推广、域名注册、网站空间、企业邮箱。业务覆盖神木地区。
注意: 在 CSS 网格中,父元素称为容器(container),它的子元素称为项(items)。
#container {
display: grid;
}
在一个网格容器中使用 grid-template-columns
属性可以添加一些列,示例如下:
.container {
display: grid;
grid-template-columns: 50px 50px;
}
上面的代码会在网格容器中添加两列,宽度均为 50px。 grid-template-columns
属性值的个数表示网格的列数,每个值表示相应的列宽度。
创建的网格会自动设置行数。 要手动调整行,使用 grid-template-rows
属性。
.container {
display: grid;
grid-template-columns: 50px 50px;
grid-template-rows: 50px 50px;
}
在 CSS 网格中,可以使用绝对单位(如 px
)或相对单位(如 em
)来定义行或列的大小。 下面的单位也可以使用:
fr
:设置列或行占剩余空间的比例,
auto
:设置列宽或行高自动等于它的内容的宽度或高度,
%
:将列或行调整为它的容器宽度或高度的百分比,
grid-template-columns: 1fr 100px 2fr;
如果需要在列与列之间添加一些间距,我们可以使用 grid-column-gap
.
grid-column-gap: 20px;
还可以用 grid-row-gap
设置行间距。
grid-row-gap: 5px;
grid-gap
属性是前两个挑战中出现的 grid-row-gap
和 grid-column-gap
的简写属性,它更方便使用。 如果 grid-gap
只有一个值,那么这个值表示行与行之间、列与列之间的间距均为这个值。
如果有两个值,那么第一个值表示行间距,第二个值表示列间距
grid-gap: 10px 20px;
到目前为止,所有的讨论都是围绕网格容器的。 grid-column
属性是用于网格项本身的属性。
网格中,假想的水平线和垂直线被称为线(lines)。 这些线在网格的左上角从 1 开始编号,垂直线向右、水平线向下累加计数。
要设置一个网格项占据几列,使用 grid-column
属性加上网格线条的编号来定义网格项开始和结束的位置。
grid-column: 2 / 4;
也可以设置它占用多行。 使用 grid-row
属性来定义一个网格项开始和结束的水平线。
grid-row: 2 / 4;
在 CSS 网格中,每个网格项的内容分别位于被称为单元格(cell)的框内。 使用网格项的 justify-self
属性,设置其内容的位置在单元格内沿水平轴的对齐方式。 默认情况下,这个属性的值是 stretch
,这将使内容占满整个单元格的宽度。 该 CSS 网格属性也可以使用其他的值:
start
:使内容在单元格左侧对齐,
center
:使内容在单元格居中对齐,
end
:使内容在单元格右侧对齐
justify-self: center;
正如能设置网格项沿水平方向的对齐方式一样,我们也可以设置网格项沿竖直方向的对齐方式。 为此,可以对网格项使用 align-self
属性来实现。
align-self: end;
CSS 网格中的网格项共享对齐方式。 可以分别设置它们的对齐方式,也可以对网格容器使用 justify-items
使它们一次性沿水平轴对齐。 这个属性能接受之前两个中学到的所有值作为属性值,但与之前不同的是,它会将网格中 所有 的网格项按所设置的方式对齐。
justify-items: center;
对网格容器使用 align-items
属性可以让网格中所有的网格项沿竖直方向对齐。
align-items: end;
可以将网格中的一些单元格组合成一个区域(area),并为该区域指定一个自定义名称。 可以通过给容器加上 grid-template-areas
来实现:
grid-template-areas:
"header header header"
"advert content content"
"advert footer footer";
在为网格添加区域模板后,可以通过引用所定义的区域的名称,将元素放入相应的区域。 为此,需要对网格项使用 grid-area
:
.item1 {
grid-area: header;
}
grid-area
属性还有另一种使用方式。 如果网格中没有定义区域模板,也可以像这样为它添加一个模板:
item1 { grid-area: 1/1/2/4; }
上例中数字代表这些值:
grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
使用 repeat
方法指定行或列的重复次数,后面加上逗号以及需要重复的值。
grid-template-columns: repeat(2,1fr,50px) 20px;
内置函数 minmax
也可用于设置 grid-template-columns
和 grid-template-rows
的值。 它的作用是在网格容器改变大小时限制网格项的大小。 为此,需要指定网格项允许的尺寸范围。
grid-template-columns: 100px minmax(50px, 200px);
repeat 方法带有一个名为自动填充(auto-fill)的功能。 它的功能是根据容器的大小,尽可能多地放入指定大小的行或列。 可以通过结合 auto-fill
和 minmax
来更灵活地布局。
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
auto-fit
效果几乎和 auto-fill
一样。 不同点仅在于,当容器的大小大于各网格项之和时,auto-fill
会持续地在一端放入空行或空列,这样就会使所有网格项挤到另一边;而 auto-fit
则不会在一端放入空行或空列,而是会将所有网格项拉伸至合适的大小。
注意: 如果容器宽度不足以将所有网格项放在同一行,余下的网格项将会移至新的一行。
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
将元素转换为网格只会影响其子元素(即直接后代元素,英文为 direct descendants。意思是一个元素的所有后代元素中,父级元素为该元素的所有元素)。 因此,如果把某个子元素设置为网格,就会得到一个嵌套的网格。
display: grid;
grid-template-columns: auto 1fr;