CSS 网格布局(grid)-排版方向(七)

洲_
202 阅读1分钟
  • 前面的例子都是从左到右, 从上到下排布的, 今天我们改变一下排版方向

溢出的方向

image.png

display: grid;
gap: 6px;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
  • 默认的效果是上图所示的, 那我们怎么实现从右到左的效果呢?
  • 我们可以设置 direction 属性实现效果
    • ltr: 默认值, 从左到右
    • rtl: 从右到左
  • 新增 direction: rtl; 样式属性 image.png image.png
  • 可以看到线的名称顺序也已经发生了变化, 我们在使用的时候需要注意一下

水平或垂直排布

image.png

  • 还是先看一下默认的效果, 下面我们通过 writing-mode 属性实现垂直排布效果
display: grid;
gap: 6px;
grid-template-columns: repeat(3, 100px);
grid-auto-rows: 100px;
writing-mode: vertical-rl;

image.png

  • 设置 writing-mode: vertical-lr; image.png image.png

  • 我们看到现在已经是垂直方向排布了, 同样线的顺序也改变了方向, 我们做一个简单的例子

.c1 {
    grid-column: 1 / 3;
}

image.png

小结

  • 水平方向从右到左排布, 可以使用 direction
  • 垂直方向排布, 可以使用 writing-mode
  • 都会导致线的顺序和方向发生改变, 在使用的时候需要注意一下

相关文档

参考文档

avatar
文章
阅读
粉丝