CSS 网格布局(grid)-栅格布局(十)

洲_
240 阅读3分钟
  • 相信你肯定用过许多框架或网格系统都使用到了栅格布局的思想
  • 我们常见的栅格布局一般会把页面的宽度分成 12 或 24 份
  • 我们今天就看一下如何通过网格布局实现我们常用的栅格布局

实现栅格布局

image.png

<div class="app">
    <div class="item1">col</div>
    <div class="item2">col-12</div>
    <div class="item3">col-12</div>
    <div class="item4">col-8</div>
    <div class="item5">col-8</div>
    <div class="item6">col-8</div>
</div>

.app {
    display: grid;
    grid-template-columns: repeat(24, [col-start] 1fr);
    grid-auto-rows: 50px;
    color: #fff;
    gap: 4px;
}

.app>div {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4c84ff;
}

.item1 {
    grid-column: 1 / 25;
}

.item2 {
    grid-column: 1 / span 12;
    grid-row: 2 / 4;
}

.item3 {
    grid-column: col-start 13 / span 12;
}

.item4 {
    grid-column: col-start 1 / span 8;
}

.item5 {
    grid-column: auto / span 8;
}

.item6 {
    grid-column: span 8;
}
  • 我们通过设置了一个 24 等分的栅格, 并在后面使用了栅格实现了布局
  • 使用 span 关键字表示这个元素应该跨多少个轨道; 对比设置结束的线, 使用 span 通常更符合我们的使用场景
  • 在示例中使用了多种方式处理 grid-column/row 选择适合你的一种方式即可

自动放置实现响应式布局

image.png image.png

<div class="app">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
    <div class="item4">item4</div>
    <div class="item5">item5</div>
</div>

.app {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 50px;
    color: #fff;
    gap: 4px;
}

.app>div {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4c84ff;
}

.item3 {
    grid-column: span 2;
}
  • 从图片上可以看到, 当 width=500 时有两列. 当 width=700 时有三列, 那这是怎能做到的呢?
  • grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    • auto-fill 用尽可能多的列来填充该行
    • minmax(200px, 1fr) 表示宽度的大小
  • 你可能注意到了, 在 width=700 时第一行空了一个位置, 而第三行却多了一个元素
  • 如果能最后的元素放到第一行的空位, 那样的效果或许会更好一些(当然按照顺序放置最好了)
  • 其实添加这个就可以了 grid-auto-flow: dense;, 这个在之前的文章也讲到过 image.png
  • 这种方式有时候会比媒体查询更好用, 因为他不需要考虑屏幕很大的情况

代码示例

小结

  • 通过网格布局我们可以很容易的实现一个栅格布局
  • 自动放置实现响应式布局, 通过 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 的使用实习响应式布局

相关文档

参考文档

avatar
文章
阅读
粉丝