CSS 网格 Gird 布局

  • CSS 网格 Gird 布局已关闭评论
  • 8 次浏览
  • A+
所属分类:Web前端
摘要

通过将属性 display 的值设为 grid,HTML 元素就可以变为网格容器。注意: 在 CSS 网格中,父元素称为容器(container),它的子元素称为项(items)。


CSS 网格 Gird 布局

创建网格 Gird

通过将属性 display 的值设为 grid,HTML 元素就可以变为网格容器。

注意: 在 CSS 网格中,父元素称为容器(container),它的子元素称为项(items)。

#container {   display: grid; } 

列,行 Column Row

在一个网格容器中使用 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; } 

单位 Unit

在 CSS 网格中,可以使用绝对单位(如 px)或相对单位(如 em)来定义行或列的大小。 下面的单位也可以使用:

fr:设置列或行占剩余空间的比例,

auto:设置列宽或行高自动等于它的内容的宽度或高度,

%:将列或行调整为它的容器宽度或高度的百分比,

grid-template-columns: 1fr 100px 2fr; 

间距 Gap

如果需要在列与列之间添加一些间距,我们可以使用 grid-column-gap.

grid-column-gap: 20px; 

还可以用 grid-row-gap设置行间距。

grid-row-gap: 5px; 

grid-gap 属性是前两个挑战中出现的 grid-row-gapgrid-column-gap 的简写属性,它更方便使用。 如果 grid-gap 只有一个值,那么这个值表示行与行之间、列与列之间的间距均为这个值。

如果有两个值,那么第一个值表示行间距,第二个值表示列间距

grid-gap: 10px 20px; 

空间大小 Spacing

到目前为止,所有的讨论都是围绕网格容器的。 grid-column 属性是用于网格项本身的属性。

网格中,假想的水平线和垂直线被称为线(lines)。 这些线在网格的左上角从 1 开始编号,垂直线向右、水平线向下累加计数。

要设置一个网格项占据几列,使用 grid-column 属性加上网格线条的编号来定义网格项开始和结束的位置。

grid-column: 2 / 4; 

也可以设置它占用多行。 使用 grid-row 属性来定义一个网格项开始和结束的水平线。

grid-row: 2 / 4; 

对齐 Align

在 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

可以将网格中的一些单元格组合成一个区域(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

使用 repeat 方法指定行或列的重复次数,后面加上逗号以及需要重复的值。

grid-template-columns: repeat(2,1fr,50px) 20px; 

限制项目大小 Limit Item Size

内置函数 minmax 也可用于设置 grid-template-columnsgrid-template-rows 的值。 它的作用是在网格容器改变大小时限制网格项的大小。 为此,需要指定网格项允许的尺寸范围。

grid-template-columns: 100px minmax(50px, 200px); 

自动填充 Auto Fill

repeat 方法带有一个名为自动填充(auto-fill)的功能。 它的功能是根据容器的大小,尽可能多地放入指定大小的行或列。 可以通过结合 auto-fillminmax 来更灵活地布局。

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)); 

嵌套网格 Nested Grid

将元素转换为网格只会影响其子元素(即直接后代元素,英文为 direct descendants。意思是一个元素的所有后代元素中,父级元素为该元素的所有元素)。 因此,如果把某个子元素设置为网格,就会得到一个嵌套的网格。

display: grid; grid-template-columns: auto 1fr;