V
主页
CSS Grid教程(入门和精讲)第16集 - CSS Grid Generator
发布人
今天的视频介绍一个非常好用的CSS Grid网格布局代码生成器:https://cssgrid-generator.netlify.app/。 我将使用这个网站重新设计我在第7集视频(https://codepen.io/brandonzhang/pen/MWEYrrJ?editors=1100)里面的网格布局。 Glitch上面的链接是:https://play-with-grid-generator.glitch.me/。
打开封面
下载高清视频
观看高清视频
视频下载器
CSS Grid用在这里太妙了!
CSS Grid教程(入门和精讲)第6集 - 元素对齐 justify-self & align-self
CSS Grid教程(入门和精讲)第10集 - 命名网格线并使用命名线布局
CSS Grid教程(入门和精讲)第14集 - display: contents
CSS Grid教程(入门和精讲)第18集 - 学习slack.com网格布局
CSS Grid教程(入门和精讲)第12集 - minmax(min(100%, 300px), 1fr) 省去媒体查询
CSS Grid教程(入门和精讲)第19集 - inline-grid (解决inline-flex没能解决的问题)
CSS Grid教程(入门和精讲)第11集 - 对齐网格轨道align-content & justify content
CSS Grid教程(入门和精讲)第9集 - 命名网格区域并在媒体查询中更换布局
CSS Grid教程(入门和精讲)第8集 - auto-fit和minmax创建灵活轨道
CSS Grid教程(入门和精讲)第7集 - 网格元素重叠和z-index
CSS Grid教程(入门和精讲)第2集 - fr单位和repeat()函数
CSS Grid教程(入门和精讲)第3集 - 网格单元和网格区域
CSS Grid教程(入门和精讲)第15集 - 隐式网格
前端新手代码练习网站 - Codepen入门教程
CSS Grid教程(入门和精讲)第17集 - 引入自定义属性(Custom Properties)
偷学一个Codepen登录页分隔线
【codepen源码】表单切换动画
CSS Grid教程(入门和精讲)第13集 - 适合练手的CSS Grid小游戏
Web Components #4 - 组件之间方法调用
使用CSS Grid可以很容易实现文字位于图片上方的卡片效果
CSS Grid教程(入门和精讲)第4集 - 网格轨道中使用minmax()函数
CSS Grid Masonry布局 - 当前仅Firefox浏览器支持
基础表单验证 JavaScript Form Validation
CSS Grid教程(入门和精讲)第1集 - 创建网格容器
CSS Grid教程(入门和精讲)第5集 - 网格对齐 justify-items & align-items
Exercism: 学习编程的同时,又提高英语水平!
写一个属于自己的CLI工具
按需导入Web Components组件,用户会爱上它的!
Web Components #1 - Custom Elements自定义元素
Helix Editor: Space+W键位管理文件窗口
学习CSS大神Lea Verou怎么写Web Components
使用Web Components写了一个吉他节拍器
7款非常棒的暗色主题
写一个属于自己的Chrome插件
GitUI: 一款使用Rust编写的Git客户端
Helix Editor: 查找和替换 (search & replace)
2个网页无障碍性知识点及text-indent的妙用
CSS Grid网格轨道可以实现transition动画啦
Web Components #2 - shadow DOM (影子DOM)