Mozilla Hacks

CSS Grid 和 Grid 高亮器现已在 Firefox 开发版

Avatar photo 由 Helen V. Holmes

发表于 2016 年 12 月 1 日 在 CSS, 开发者工具, 以及 精选文章

CSS Grid 现已更新至 Firefox 52 开发版 (在此下载！)。随着 Chrome（以及预计的 Safari 和 Edge）的实现即将到来，使用网格构建网站将很快在所有主流浏览器中成为可能。

Grid 允许用户将 HTML 与布局问题分离，将这些问题专门在 CSS 中表达。它可以适应媒体查询和不同的上下文，使其成为 Twitter 的 Bootstrap 或 Skeleton 等框架的可行替代方案，这些框架依赖于精确且紧密耦合的类结构来定义内容网格。

网格确实有可能改变我们构建网页的方式，从而减少我们目前在网页构建中固有的脆弱性、代码膨胀和高维护成本的风险。Jen Simmons 称之为 Web 的真实艺术指导，而 Rachel Andrew 则构建了 Grid by Example 来提供信息、分享和宣传它。如果您是网格新手，请务必查看。

如您在视频中所见，网格高亮器工具将帮助您开始在工作时在页面内说明网格。计划在不久的将来添加更多工具来不断改进与网格的协作。

要访问此工具，请确保您运行的是最新版本的 DevEdition。接下来，打开一个已知具有网格代码的页面——我们建议您使用 这些演示。通过开发者→检查器打开检查器。选择具有属性 display: grid; 的元素。要切换网格线，请单击“网格”旁边的图标，这将永久保留这些线。

Firefox 开发者工具团队计划在未来进行一系列改进，使与网格的协作更轻松。您可以通过这些错误跟踪我们的进度

用于跟踪此工作的元错误是 错误 1181227。

关于 Helen V. Holmes

Helen V. Holmes 的更多文章...

10 条评论

  1. Vincent

    Invision 链接（指向新面板的设计）位于登录后 :(

    2016 年 12 月 1 日 下午 10:32

    1. Helen V. Holmes

      感谢您指出这一点！此链接应该有效：https://invis.io/3X87NEBYH#/179720294_Grid

      2016 年 12 月 6 日 上午 03:43

  2. Kyle McVay

    我真的很喜欢这个新程序的外观，希望更多人也会喜欢。

    2016 年 12 月 2 日 下午 16:45

  3. isaac weathers

    非常棒。很高兴看到一些网格选项，这些选项不涉及引入像 BootStrap 或 Foundation 这样的完整框架，然后必须对其进行黑客攻击才能获得简化的网格和一些基本类。我看到 Chrome 很快就会引入这个功能，但遗憾的是 IE ~ Edge 将始终是那个阻止派对的浏览器，并强迫使用 polyfil 和解决方法，这些方法在该浏览器的 Web 开发中无处不在。那么您认为这是 FlexBox 的替代品还是替代品？

    2016 年 12 月 2 日 下午 18:38

    1. Helen V. Holmes

      嗨，Issac，

      我认为我们会将其更多地视为 Bootstrap 或 Skeleton.css 等框架的替代品，而不是 Flexbox 的替代品。我认为人们目前正在使用 Flexbox 完成很多代码，而 Grid 可能更适合这些代码——Flexbox 非常适合将元素沿行或列排列（例如 UI 按钮），而 Grid 非常适合多维布局（您需要列和行）。它仍然是一项非常新的技术，因此很难说人们最终会如何使用所有选择，但我很期待看到人们最终会构建出什么！

      2016 年 12 月 6 日 上午 03:41

  4. Changhyun Cho

    太棒了！它只会在 friefox 上吗？

    2016 年 12 月 2 日 下午 21:26

    1. Helen V. Holmes

      该工具仅在 Firefox 中，但 Grid 将在 Firefox 和 Chrome 中发布，预计将在 3 月份同时在两个浏览器中发布。

      2016 年 12 月 6 日 上午 03:41

  5. Matt Enright

    哈哈，从 html1.x 到现在；伯纳斯·李先生在标准通用公司的小黑客已经走得很远了。我非常有兴趣看看这将把我们带到哪里。这不仅仅是搭乘 SpaceX 火箭进入低轨道的便车。这可以为一些聪明人提供免费搭乘前往红色星球的旅行，或者免费搭乘前往火星和木星之间小行星带的旅行，以及来自人类思想的许多其他奇妙的伟大作品，谁知道呢，甚至可能是香蕉的思想：P。好吧，也许我有点过分了，但这很有趣——新的伟大工具和玩具只会让我们走得更远。并且这个工具从一开始就一直在让我们变得更好；尽管少数像 ISIS 和 NSA 这样的人试图将其用于邪恶。也许是我们这些了解万维网和网络真实形式的人应该像骑士一样组成一个松散的组织，站在角度上，像简单的夜间守卫一样松散地守卫着自由，并对思想的相遇持开放态度，以便我们所有人能够成长和学习，我们每个人都是这个美丽的蓝色星球上的人，可以学习我们每个人在自身方式上都是多么美丽，以及我们可以分享的食物和欢笑可以多么伟大。

    感谢您，海伦，愿天堂祝福您！！！

    马修。

    2016 年 12 月 4 日 下午 13:32

  6. Richard Wale Aderounmu

    CSS Grid 是一个很棒的黑客，是对非编码人员的前沿编码的改进，它使我们这样的人的工作变得轻而易举。这对视觉构图来说是一个巨大的飞跃。点赞，伙计们。赞美海伦。

    2016 年 12 月 5 日 下午 21:13

  7. Tiago Celestino

    太棒了。

    2016 年 12 月 10 日 下午 15:08

本文的评论已关闭。