跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
grid

132 篇文章
{
,

}
文章“网格的黑暗面”的直接链接
无障碍 网格

网格的黑暗面

Manuel Matuzovic 指出,为了在一些相当简单的标记场景中使用 CSS 网格,我们可能会倾向于扁平化我们的 HTML,以确保我们需要的所有元素都可以参与网格。……

Avatar of Chris Coyier
Chris Coyier 于 2019 年 3 月 10 日
文章“我们对网格的期望”的直接链接
网格 子网格

我们对网格的期望

有一段时间,我们觉得 CSS 网格太棒了。它在所有主要浏览器中同时快速且热烈地到来。现在,随着我们看到更多使用案例,我们也发现人们对网格有了更多的期望。

Michelle Barker …

Avatar of Chris Coyier
Chris Coyier 于 2019 年 2 月 26 日
文章“瞧,不用媒体查询!使用 CSS 网格创建响应式布局”的直接链接
网格 媒体查询 响应式

瞧,不用媒体查询!使用 CSS 网格创建响应式布局

CSS 网格不仅重塑了我们思考和构建网页布局的方式,还促使我们编写更具弹性的代码,取代了我们之前使用的“hacky”技术,在某些情况下,甚至消除了对……的需要。

Avatar of Juan Martín García
Juan Martín García 于 2019 年 2 月 26 日
文章“响应式设计和 CSS 自定义属性:构建灵活的网格系统”的直接链接
CSS 变量 Flexbox 网格 响应式

响应式设计和 CSS 自定义属性:构建灵活的网格系统

上次,我们查看了一些在响应式设计中声明和使用 CSS 自定义属性的可能方法。在本文中,我们将更深入地了解 CSS 变量以及如何在可重用组件中使用它们,以及……

Avatar of Mikolaj Dobrucki
Mikolaj Dobrucki 于 2019 年 2 月 26 日
文章“正确使用 CSS 网格”的直接链接
网格

正确使用 CSS 网格

Violet Peña 分享了她对使用 CSS 网格的建议。它们基本上可以归结为以下高级要点

  1. 使用名称而不是数字来设置我们的网格列。
  2. fr 应该是我们选择的灵活单位。
  3. 我们实际上并不
…
Avatar of Robin Rendle
Robin Rendle 于 2019 年 2 月 22 日
文章“使用 Flexbox 实现 IE10 兼容的网格自动放置”的直接链接
Flexbox 网格 Internet Explorer

使用 Flexbox 实现 IE10 兼容的网格自动放置

如果您正在开发支持旧版浏览器的 Web 应用程序,并且像我一样渴望从旁观者角度了解CSS 网格,那么我有一些好消息:我发现了一种巧妙的纯 CSS 方法,可以在 IE10+ 中使用网格自动放置!

现在,……

Avatar of Brian Holt
Brian Holt 于 2019 年 2 月 18 日
文章“快速!Flexbox 和网格有什么区别?”的直接链接
Flexbox 网格 布局

快速!Flexbox 和网格有什么区别?

让我们快速火力全开,尝试用一些要点来回答这个问题,而不是冗长的解释。Flexbox 和网格有很多相似之处,首先它们都用于布局,而且……

Avatar of Chris Coyier
Chris Coyier 于 2019 年 2 月 14 日
文章“CSS 砌体布局的方法”的直接链接
Flexbox 网格 Houdini 布局

CSS 砌体布局的方法

在 Web 上,砌体布局是指将大小不一的项目排列起来,以避免出现不均匀的间隙。我猜这个术语是由 David DeSandro 创造(或至少推广)的,因为……

Avatar of Chris Coyier
Chris Coyier 于 2020 年 12 月 2 日
文章“为什么我们需要 CSS 子网格”的直接链接
网格 子网格

为什么我们需要 CSS 子网格

我非常喜欢 CSS 网格,并且现在几乎在每个项目中都使用它。但是,其中有一部分使得事情变得比实际情况复杂得多:缺少子网格。……

Avatar of Robin Rendle
Robin Rendle 于 2019 年 1 月 11 日
  • 更新的
  • 1
  • ...
  • 8
  • 9
  • 10
  • ...
  • 15
  • 更旧的

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费信用额度!
CSS-Tricks
  • 为我们撰写文章!
  • 与我们合作广告
  • 联系我们
社交
  • RSS Feed
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.