V
主页
使用CSS Grid可以很容易实现文字位于图片上方的卡片效果
发布人
通常想要将文字放置于图片上方用到的是使用position: absolute,但是现在已经有了CSS Grid,简单的几行代码就可以实现同样的效果,使代码更简单易读。在卡片.card上面设置display: grid,然后将其子元素全部设置为grid-column: 1和grid-row: 1,那么这些子元素将全部位于1/2这个网格区域(grid area)里面,将具体细节调整每个元素的位置即可。
打开封面
下载高清视频
观看高清视频
视频下载器
CSS Grid用在这里太妙了!
CSS Grid网格轨道可以实现transition动画啦
CSS absolute position 关闭按钮
CSS 3D旋转注册/登录框
CSS Grid教程(入门和精讲)第1集 - 创建网格容器
CSS Grid教程(入门和精讲)第14集 - display: contents
Flexbox和CSS Grid解决产品卡片元素对齐问题
通过CSS代码Background-image增加背景图片
【CSS实例】 使用CSS Grid和clip-path排版
CSS Grid教程(入门和精讲)第16集 - CSS Grid Generator
CSS Grid Masonry布局 - 当前仅Firefox浏览器支持
CSS Grid教程(入门和精讲)第5集 - 网格对齐 justify-items & align-items
CSS BEM命名规范和我收藏的8个使用BEM的网站
CSS Grid教程(入门和精讲)第4集 - 网格轨道中使用minmax()函数
HTML CSS JavaScript 网站明暗模式切换效果
CSS Grid教程(入门和精讲)第6集 - 元素对齐 justify-self & align-self
CSS Grid教程(入门和精讲)第10集 - 命名网格线并使用命名线布局
CSS Grid教程(入门和精讲)第19集 - inline-grid (解决inline-flex没能解决的问题)
CSS Grid教程(入门和精讲)第12集 - minmax(min(100%, 300px), 1fr) 省去媒体查询
CSS Grid教程(入门和精讲)第18集 - 学习slack.com网格布局
使用CSS transform属性设计页面旋转切换效果
CSS: 从零开始教你写一个标签管理器
CSS absolute position 鼠标悬停挂件
HTML & CSS设计Apple Store滑动卡片slider
CSS Grid教程(入门和精讲)第3集 - 网格单元和网格区域
CSS Flexbox 精讲 EP1 - 声明display: flex
CSS Grid教程(入门和精讲)第15集 - 隐式网格
【视频教程】使用Magnific Popup插件制作图片Lightbox效果 | jQuery Lightbox Plugin
从零开始教你设计一个优雅的input输入框
纯CSS登录按钮加载动画
CSS博客订阅卡片
CSS反选伪类:not选择器示范
调试CSS好帮手 - CSS Overview工具
Multipass - 容易上手的linux虚拟机
远程前端工作经验分享
CSS Grid教程(入门和精讲)第13集 - 适合练手的CSS Grid小游戏
CSS Grid教程(入门和精讲)第11集 - 对齐网格轨道align-content & justify content
CSS Grid教程(入门和精讲)第17集 - 引入自定义属性(Custom Properties)
CSS Grid教程(入门和精讲)第7集 - 网格元素重叠和z-index
Helix Editor: Space+W键位管理文件窗口