时间：2023-08-31 09:06:02 | 来源：网站运营
时间：2023-08-31 09:06:02 来源：网站运营
CSS grid 网格/栅格布局：
在线咨询
<!-- 设置grid布局，是通过dispaly属性进行设置的 -->display:grid;display:inline-grid;grid-template 设置网格轨道 就是设置网格的行数列数 设置在父元素身上<!-- 设置网格列，设置三列，每列10px宽 -->grid-template-columns: 10px 10px 10px;<!-- 设置网格列，设置三行，每行10px宽 -->grid-template-rows: 10px 10px 10px;<!-- -->grid-gap 设置网格轨道之间的间隙 设置在父元素上<!-- 设置网格列之间间隙为10px -->grid-column-gap:10px;<!-- 设置网格行之间间隙为10px -->grid-row-gap:10px;<!-- 设置网格行和列之间间隙为10px -->grid-gap: 10px; <!-- 第一个值为行第二个为列 --> grid-gap: 10px 20px;grid-column 设置网格子元素的占行列宽高的大小 设置在子元素上 - 线是指网格布局 grid-template 设置好后，每个单元格周围的边。 - 就比如 3X3布局，行线 列线都是4条。<!-- 设置子元素列占线1到3的位置 -->grid-column:1/3;<!-- 设置子元素行占线1到3的位置 -->grid-row:1/3;justify-self 设置子元素网格项水平对齐的方式 设置在子元素上<!-- 这将使内容占满整个单元格的宽度 -->justify-self: stretch;<!-- 单元格左对齐 -->justify-self:start;<!-- 单元格居中 -->justify-self:center;<!-- 单元格右对齐 -->justify-self:end;align-self 设置子元素网格项垂直对齐的方式 设置在子元素上<!-- 这将使内容占满整个单元格的宽度 -->align-self: stretch;<!-- 单元格左对齐 -->align-self:start;<!-- 单元格居中 -->align-self:center;<!-- 单元格右对齐 -->align-self:end;justify-items 设置所有网格元素水平对齐方式 设置在父元素上。<!-- 单元格居中 -->justify-items:center;align-items 设置所有网格元素垂直对齐方式 设置在父元素上<!-- 单元格居中 -->align-items:center;grid-template-areas 将单元格每个部分都起一个名字进行区域划分。 设置在父元素上 就比如
grid-template-areas: "header header header" "advert content content" "advert footer footer";这样就表示这个3X3的网格中名为 header 占了头部的三格。grid-area 给子元素网格项进行设置名字，把他的名字与之前设定的grid-template-areas进行设定。
就比如
grid-area:header;当前元素就是名为header的子元素网格项，占了之前制定的网格头部三格。网格布局单位:
grid-area还有一个书写方法，grid-area:1/2/3/4:
这里的4个数字依次分别代表 第 1 条水平网格线（起始）、第 2 条垂直网格线（起始）、第 3 条水平网格线（终止）、第 4 条垂直网格线（终止）。
绝对单位使用
px
相对单位
em%vwvhfrauto
fr:设置行或者列占剩余空间的比例。auto:设置列宽或行高自动等于它的内容的宽度或高度
repeat 方法指定行或列的重复次数，后面加上逗号以及需要重复的值。 就比如内置函数grid-template-columns:repeat(100,100px);相当于分了100列，每一列都是100px。repeat(100,100px)第一个值是数量，第二个值是大小。
minmax 也可用于设置 grid-template-columns 和 grid-template-rows 的值。 它的作用是在网格容器改变大小时限制网格项的大小。 为此，你需要指定网格项允许的尺寸范围。 例如：grid-template-columns: 100px minmax(50px, 200px);在上面的代码中，我们通过 grid-template-columns 添加了两列，第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px。
repeat 方法带有一个名为自动填充（auto-fill）的功能。 它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。 你可以通过结合 auto-fill 和 minmax 来更灵活地布局。repeat(auto-fill, minmax(60px, 1fr));在第一个网格中，请使用 auto-fill 和 repeat 来填充网格。 其中列宽的最小值为 60px，最大值为 1fr。 你可以调整最右侧的预览区大小，查看自动填充的效果。
auto-fit 效果几乎和 auto-fill 一样。 不同点仅在于，当容器的大小大于各网格项之和时，auto-fill 会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而 auto-fit 则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。注意： 如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。
关键词：布局
