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

文章标签
grid

132 篇文章
{
,

}
文章“使用 CSS 网格实现圣杯布局”的直接链接
网格 圣杯布局

使用 CSS 网格实现圣杯布局

如何使用 CSS 网格构建非常常见的布局。顶部为页眉,底部为页脚。两列,侧边栏和主要内容。此布局在同一列中的主要内容上方有导航。
Avatar of Chris Coyier
Chris Coyier 于 2021 年 1 月 27 日
文章“棋盘式揭示”的直接链接
CSS 动画 网格

棋盘式揭示

我记得 10 岁的时候,我的表弟来我们家玩。他那时(现在依然是)一个很酷的孩子,那种会带着自己用软盘编写的象棋游戏来的人。他版本的象棋……

Avatar of Geoff Graham
Geoff Graham 于 2021 年 1 月 25 日
文章“你需要的是 minmax(10px, 1fr) 而不是 1fr”的直接链接
列 网格 minmax

你需要的是 minmax(10px, 1fr) 而不是 1fr

网上有很多这样的网格

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

我的意思是,它们真正应该使用的是

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(10px, 1fr));
}
…
Avatar of Chris Coyier
Chris Coyier 于 2021 年 1 月 22 日
文章“用于覆盖元素的实用程序类”的直接链接
绝对定位 网格 逻辑属性 实用程序类

用于覆盖元素的实用程序类

对 Michelle Barker 这里 的“相同”表示衷心感谢

以下是我在 CSS 中发现自己一遍又一遍需要做的事情:用一个元素完全覆盖另一个元素。每次都是相同的 CSS:第一个元素(需要

…
Avatar of Chris Coyier
Chris Coyier 于 2020 年 12 月 26 日
文章“三行 CSS 代码实现日历”的直接链接
网格

三行 CSS 代码实现日历

这篇文章 没有署名,而且发布在一个比这里更奇怪的网站上,但我欣赏其中的技巧。七列网格可以快速创建日历布局。你可以让...

Avatar of Chris Coyier
Chris Coyier 于 2020 年 12 月 24 日
文章“如何让粘性元素和全屏元素和谐共处”的直接链接
网格 粘性

如何让粘性元素和全屏元素和谐共处

前几天我有一个独特的要求:构建一个布局,其中包含全屏元素,而一个元素始终粘贴在顶部。这最终很难实现,所以我在这里记录一下,以防万一有人……

Avatar of Silvestar Bistrović
Silvestar Bistrović 于 2021 年 1 月 14 日
文章“跳出框框思考,使用 CSS 网格”的直接链接
网格

跳出框框思考,使用 CSS 网格

Alex Trost 的精彩教程(基于一些演示,比如这个,来自 Andy Barefoot)展示了,尽管 CSS 网格在横向和纵向上都有直线网格,但你可以在网格线上放置项目,从而创建交错效果,...

Avatar of Chris Coyier
Chris Coyier 于 2020 年 11 月 18 日
文章“自动增长文本区域最简洁的技巧”的直接链接
网格 文本区域

自动增长文本区域最简洁的技巧

今年早些时候,我写了一篇关于自动增长文本区域和输入框 的文章。目的是让 <textarea> 更像一个 <div>,这样它就可以根据需要扩展高度以包含...

Avatar of Chris Coyier
Chris Coyier 于 2020 年 11 月 11 日
文章“第 196 期:与 Kyle Simpson 一起学习网格和 Flexbox”的直接链接
Flexbox 网格 布局

第 196 期:与 Kyle Simpson 一起学习网格和 Flexbox

Kyle 是一个 JavaScript 人才。他精通 Web 开发,对 CSS 也非常了解,但对现代 CSS 布局工具(如Flexbox 和网格)并不熟悉。我们在这里没有从 0 到 100 的讲解,但是...

Avatar of Chris Coyier
Chris Coyier 于 2020 年 10 月 30 日
  • 较新的
  • 1
  • ...
  • 3
  • 4
  • 5
  • ...
  • 15
  • 较旧的

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

我们的手工制作的时事通讯

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

© 2024 . All rights reserved.