25 个使用 CSS Grid 的极其现代的布局✨
大家好👋🏽,这篇文章真的写得太长了。我花了好几个月的时间深入研究 CSS 网格布局。CSS 规范中增加了更多高级技术,让我们的工作更加轻松。
我基于CSS Grid 和 Flexbox开发了 25 种极其现代的布局。
你知道嗎??
✅ 每个布局都遵循移动优先方法。
✅ 响应所有断点。
❌ 未使用绝对或相对定位。
✅ 仅使用 CSS 网格技术。
不只是展示,也是为了练习
嘿,这 25 种布局为从初学者到高级水平的现代布局提供了最佳实践。
对于每个布局,我列出了 GitHub 链接🔗 和预览链接🔗。
设计归功于Marko Jotic并在Gumroad上发布
实践这种现代布局的 3 个步骤
✅步骤 01 - Fork 仓库。✅步骤 02 -了解所使用的 HTML 分组和 CSS 布局技术。✅ 步骤
03 - 自行重新创建布局。
布局 01
布局 02
布局 03
布局 04
布局 05
布局 06
布局 07
布局 08
布局 09
布局 10
布局 11
布局 12
布局 13
布局 14
布局 15
布局 16
布局 17
布局 18
布局 19
布局 20
布局 21
布局 22
布局 23
布局 24
布局 25
练习做出完美的布局!!