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

文章标签
grid-template-columns

6 篇文章
{
,

}
文章的直接链接 动画 CSS 网格 (如何 + 示例)
动画 网格 grid-template-columns grid-template-rows

动画 CSS 网格 (如何 + 示例)

我很高兴地告诉大家,CSS 的 grid-template-rows 和 grid-template-columns 属性 现在在所有主要 Web 浏览器中都支持动画!好吧,CSS 网格在技术上很长一段时间以来就支持动画,因为它直接烘焙…

Avatar of Daniel Schwarz
Daniel Schwarz 于 2023 年 1 月 25 日
文章的直接链接 探索 CSS 网格的隐式网格和自动放置功能
网格 grid-auto-flow grid-template-columns grid-template-rows 隐式网格

探索 CSS 网格的隐式网格和自动放置功能

使用 CSS 网格时,首先要做的是在要成为网格容器的元素上设置 display: grid。然后我们使用 grid-template-columns、grid-template-rows… 的组合显式地定义网格。

Avatar of Temani Afif
Temani Afif 于 2022 年 8 月 8 日
文章的直接链接 CSS 网格中的手风琴行
网格 grid-template-columns grid-template-rows

CSS 网格中的手风琴行

我敢打赌,grid-template-columns 的使用频率比 grid-template-rows 高 10 倍,但也许每个人都错过了。 Eric Meyer 这样在他的主要网站布局网格上添加了许多行线

grid-template-rows: repeat(7, min-content) 1fr repeat(3, 
…
Avatar of Chris Coyier
Chris Coyier 于 2020 年 7 月 23 日
文章的直接链接 CSS 网格中的等宽列有点奇怪
网格 grid-template-columns minmax

CSS 网格中的等宽列有点奇怪

如今,一切都变得灵活了。如果你写 grid-template-columns: 200px 200px 200px;,当然,你会得到等宽列,但那只是极少数情况。你通常的意思是 *三列等宽流体列*。

我们有 分数单位 用于…

Avatar of Chris Coyier
Chris Coyier 于 2022 年 1 月 27 日
文章的直接链接 4 个 CSS 网格属性(以及一个值)可以满足大多数布局需求
网格 grid-template-columns

4 个 CSS 网格属性(以及一个值)可以满足大多数布局需求

CSS 网格为我们提供了一个强大的网站布局系统。 CSS-Tricks 指南 为你提供了对网格属性及其布局示例的全面概述。我们在这里要做的是一种反向方法,向你展示最小的…

Avatar of Anna Prenzel
Anna Prenzel 于 2020 年 3 月 30 日
文章的直接链接 只需 20 行 CSS 代码即可实现响应式网格杂志布局
网格 grid-template-columns

只需 20 行 CSS 代码即可实现响应式网格杂志布局

我最近正在研究博客的现代版本。这个想法是向读者提供来自这些博客的最新帖子的精选,以杂志风格的布局形式呈现,而不是仅仅列出我们最喜欢的博客…

Avatar of Keir Watson
Keir Watson 于 2020 年 5 月 2 日

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发的最新动态

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

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

© 2024 . All rights reserved.