CSS 网格布局(grid)-自动定位(五)

洲_
284 阅读2分钟
  • 当部分或全部子项目没有被明确指定位置时该如何处理呢? 我们今天就来看一下
  • 针对含有数个项目的网格，其实最简单的方式就是使用自动定位。

默认定位

display: grid;
gap: 2px;
grid-template-columns: repeat(3, 1fr);

image.png

  • 如果没有为项目指定位置信息，它们就会把自己摆放在网格中，每个单元格中放一个。

行的大小

image.png

  • c4需要占据的高度变大时, 整行都会变大. 默认情况会根据子项目的内容确定行高
grid-template-rows: 50px 70px;

image.png

  • 我们改成了两列, 并通过设置 grid-template-rows; 来设置行高
  • 可以看出来, 我们设置的 50px 和 70px 都已经生效
  • 如果第三行也需要设置那应该怎么办呢? 或者我们也不确定行数, 那应该怎么办呢?
grid-auto-rows: 50px 70px;

image.png

  • 是的我们可以通过 grid-auto-rows 来设置
  • 当然如果你需要设置最大值和最小值也是可以的(第一节简单的讲过)
  • 即: grid-auto-rows: minmax(50px, auto);, 最小值为 50px, 最大值不限

按列自动定位

  • 上面的内容都是行的操作和自动定位, 那么列怎么实现呢?
  • grid-auto-flow 的默认值为 row
  • 我们就设置为 column, 看一下他的效果
display: grid;
gap: 2px;
grid-auto-flow: column;
grid-template-rows: repeat(2, 50px);
grid-auto-columns: 1fr 2fr;

image.png

  • 原来的排布是一行一行的排, 现在是一列一列的排

自动定位的项目的顺序

display: grid;
gap: 2px;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(50px, auto);

.c1 {
    grid-column: 1 / 3;
    grid-row: 1 / span 2;
}
.c3 {
    grid-column: 1 / span 2;
}

image.png

  • 可以看到通过自动排序, 在 c2 的下方出现了空白区域, c4 没有顶上去, 也就导致了 c5 放到了最下面
  • 其实我们可以设置 grid-auto-flow: row dense; 让布局更紧凑, row 为默认值可以省略
display: grid;
gap: 2px;
grid-auto-flow: dense;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(50px, auto);

image.png

小结

  • 默认定位: 不对项目指定位置信息, 每个单元格中一个
  • grid-template-rows 和 grid-auto-rows 设置行的大小, minmax()的使用
  • 按列自动定位(改变排列的方向), grid-auto-flow 默认值为 row, 可以改为 column
  • 按自动定位时会出现空白的情况, 可以使用 grid-auto-flow: dense 变成紧凑型(实际上为 row dense)

相关文档

参考文档

avatar
文章
阅读
粉丝