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

文章标签
grid

132 篇文章
{
,

}
《赞美阴影》文章的直接链接
background-image 居中 网格 object-fit 滚动捕捉 堆叠上下文

赞美阴影

我们亲爱的朋友 Robin 有一篇名为赞美阴影的新文章。现在,在你跳过去寻找有关 CSS 盒阴影、文字阴影和阴影过滤器的要点之前……这不是那样。这是一篇…

Avatar of Geoff Graham
Geoff Graham 于 2022 年 7 月 12 日
《在网格容器中按条件样式化选定元素》文章的直接链接
网格 nth-child 伪元素

在网格容器中按条件样式化选定元素

日历、购物车、画廊、文件浏览器和在线库是可选择项目以网格形式显示(即方形格子)的一些情况。你知道,即使是那些要求你选择所有带有斑马线或其他东西的图像的安全检查……

Avatar of Preethi
Preethi 于 2022 年 6 月 15 日
《具有最小大小的最大列的自动填充 CSS 网格》文章的直接链接
自动填充 网格

具有最小大小的最大列的自动填充 CSS 网格

在 Drupal 10 核心代码中,我们正在实现一种新的自动填充 CSS 网格技术,我认为它很酷,值得与全世界分享。

要求是

  • 用户指定最大列数。这是自动填充网格的“自然”
…
Avatar of Mike Herchel
Mike Herchel 于 2022 年 2 月 16 日
《使用 position: sticky 与 CSS 网格》文章的直接链接
网格 sticky

使用 position: sticky 与 CSS 网格

假设你有一个两列 CSS 网格,并且你希望其中一列的行为类似于 position: sticky;。没有什么可以阻止你这样做。但是这两列的默认高度将是…

Avatar of Chris Coyier
Chris Coyier 于 2021 年 12 月 10 日
《响应式布局,更少的媒体查询》文章的直接链接
clamp Flexbox 网格 媒体查询 响应式

响应式布局,更少的媒体查询

我们不能谈论 Web 开发而不谈论响应式设计。如今这已经成为一种必然,而且已经持续了多年。媒体查询 是响应式设计的一部分,它们不会消失。自…

Avatar of Temani Afif
Temani Afif 于 2023 年 7 月 6 日
《CSS 网格中的可扩展部分》文章的直接链接
网格

CSS 网格中的可扩展部分

我喜欢 CSS 网格。我喜欢的是,只需几行代码,我们就可以实现完全响应式的网格布局,通常根本不需要任何媒体查询。我很擅长使用 CSS 网格来创建有趣的布局,同时保持…

Avatar of Kev Bonett
Kev Bonett 于 2021 年 10 月 18 日
《使用现代 CSS 减少绝对定位》文章的直接链接
网格 position

使用现代 CSS 减少绝对定位

Ahmad Shadeed 在博客中表达了这样一种观点:我们可能不再像过去那样需要依赖 position: absolute。一方面:堆叠元素。例如,如果你有一堆应该…

Avatar of Chris Coyier
Chris Coyier 于 2021 年 10 月 13 日
《拥抱非对称设计》文章的直接链接
网格 line-clamp overflow text-overflow

拥抱非对称设计

我永远不会忘记 Karen McGrane 给世界上的一个伟大教训:截断不是内容策略。这个想法是,仅仅通过编程方式剪掉文本就像一把大锤,避免了那种真正需要思考和规划的…

Avatar of Chris Coyier
Chris Coyier 于 2021 年 9 月 20 日
《注意“间隙”》文章的直接链接
Flexbox gap 网格 多列布局

注意“间隙”

你可能已经知道 CSS gap 属性。它并不完全是新的,但它在去年获得了重要的新功能:它现在除了 CSS 网格之外,还在 Flexbox 中生效。还有,我…

Avatar of Patrick Brosset
Patrick Brosset 于 2021 年 9 月 16 日
  • 更新
  • 1
  • 2
  • 3
  • ...
  • 15
  • 旧版

CSS-Tricks 由 DigitalOcean 提供技术支持。

关注 Web 开发的最新动态

使用我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律事项
  • 获取免费积分!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告
  • 联系我们
社交媒体
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.