Mozilla Hacks

使用 CSS Grid（以及 Subgrid！）打造更快的布局

Avatar photo 作者：Miriam Suzanne

发布时间：2019 年 10 月 18 日 分类：CSS 和 精选文章

自 2017 年初以来，CSS Grid 已在大多数主流浏览器中可用，它比以往任何时候都更强大地提升了网页布局。但是，看起来很复杂的语法（行名！网格区域！minmax！fit-content！fr units！）和缺少 IE11 支持可能会让许多开发者望而却步。

不要让这些阻碍你：CSS Grid 使我的布局过程更快、更简单，并且更加灵活。我们可以从一些基本知识开始，并且回退方案并不一定很复杂。

借助 Subgrid，我们还可以开始在一个共享网格上对嵌套元素进行布局，非常适合卡片布局。

以及常见的表单模式。

关于 Miriam Suzanne

Miriam 是 OddBird 的联合创始人，拥有 15 年的项目经理、用户体验设计师和前端开发经验。她是 Sass 核心团队成员、CSS Tricks 的专栏作家，以及 Susy、True 和 Herman 等流行开源工具的创建者。Miriam 也是 Teacup Gorilla 的音乐家、出版的作家和剧作家，以及世界各地会议的特色演讲者。

更多 Miriam Suzanne 的文章…

一条评论

  1. Waldemar

    我仍然难以找到一种方法，让网格始终填充所有行（包括最后一行），无论项目数量如何，并且无需查询。许多示例使用像 12 这样的巧妙的项目数量，可以很好地被 1、2、3 和 4 整除，因此最后一行始终是满的。
    例如：我有 9 个项目。
    – 在手机上：每行显示 1 个（简单）
    – 在平板电脑上：每行显示 2 个，将最后一个拉伸到整个长度以填充该行
    – 在笔记本电脑上：每行显示 3 个（简单）
    – 在更大的屏幕上：第一行 5 个，第二行 4 个项目拉伸以填充该行

    或更高级：根据内容大小（图片、文本）垂直拉伸/跨越项目。

    2019 年 10 月 18 日 下午 8:27

本文的评论已关闭。