西西木科技-专业的shopify liquid开发机构-前端JS丨react后端丨API接口丨shopify plus丨外贸独立站
CSS 网格布局是当今 CSS 中最强大的布局系统。 与flexbox的一维布局系统不同网站布局；三个网站都在玩网格布局，CSS Grid布局是一种二维布局系统，这意味着它可以同时处理列和行。 您可以通过将 CSS 规则应用到父元素（称为网格容器）及其子元素（称为网格项）来轻松使用网格布局。
Grid网格布局是目前布局中属性最多的。 初学者很容易灰心丧气。 为了让大家更容易上手，推荐三个学习Grid布局的网站。
网格花园小游戏
迷你游戏“GRID GARDEN”让你通过编写CSS代码来种植你的胡萝卜花园！ 通过游戏来学习网格布局是非常有趣的。
通过亲自测试，半小时即可通过关卡，并直观地教导您（Grid Container）网格模板和（Grid Items）网格区域相关属性的应用。 这可以防止您被 Grid 复杂的 API 阻止。
资源链接：
CSS Grid Generator 在线生成器
CSS 网格生成器是 Sarah Drasner 创建的免费工具。 它是一个可视化设计工具网站布局，可以让我们创建一个基本的Grid布局，然后用它生成相应的代码来帮助我们快速布局。
以圣杯布局为例
通过修改边距和网格，然后查看生成的代码，可以轻松完成此操作
生成的示例代码如下
<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
<div class="div5"> </div>
</div>
.parent {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 2fr repeat(5, 1fr) 1.5fr;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.div1 { grid-area: 1 / 1 / 2 / 7; }
.div2 { grid-area: 2 / 1 / 7 / 2; }
.div3 { grid-area: 7 / 1 / 8 / 7; }
.div4 { grid-area: 2 / 6 / 7 / 7; }
.div5 { grid-area: 2 / 2 / 7 / 6; }
使用CSS Grid Generator可以帮助我们直观地创建网格模型。 网格布局是网格的艺术。 建立基于网格的思维也很重要。 CSS 网格生成器可以帮助您更快地了解整体布局。 值得推荐。 。
资源链接：CSS 网格生成器
网格学习导航完整指南
CSS Tricks是国外优秀的前端开发博客，主要分享CSS样式的使用技巧、经验和教程。 值得前端开发阅读和收藏的国外网站。
指南部分《网格完整指南》以简单易懂的方式介绍了网格布局的许多API。 代码和图解让我们更容易学习。 教程质量很高，值得一看。
CSS-Tricks 网站是一个非常优秀的网站，尤其是对于 CSSers 来说。 网站不断更新一些优秀的教程和技术，为前端社区做出了巨大的贡献。
资源链接：
网格布局学习的重点是如何利用好grid-template系列属性对设计稿进行合理的划分和栅格化。
display
grid-template-columns
grid-template-rows
grid-gap
grid-template-areas
grid-auto-flow
grid-auto-columns:
如何利用grid-area系列属性来定位容器内部的内容
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column 。
grid-row
grid-area
还有一些相对于轴定位的属性shopify主题，比如justify-item、align-content网站布局，和flex布局中的大致相同。可以迁移学习
justify-item
justify-content
justify-self
align-item
align-content
align-self
总结
2021年，浏览器兼容性不再是最麻烦的问题。 网格布局具有极强的适应性和灵活性。 Grid 不会取代 Flex。 相反，他们两个是很好的搭档shopify主题，可以和flex一起使用。 它解决了很多棘手的问题，弥补了flex的一些缺点。 值得学习。
❤️谢谢大家
如果您发现此内容有帮助：
请点赞支持，让更多人看到此内容（如果不喜欢就收藏了，就是流氓-_-）
关注公众号闲鱼爱前端，让我们一起学习、共同进步。
如果您觉得不错，还可以阅读其他文章（感谢朋友们的鼓励和支持）：
Nodejs实现定时爬虫
React-Query 让你的状态管理更加优雅
前端页面布局学习工具
面试必备知识点深浅拷贝
SPA前端路由原理及实现
西西木科技是shopify官方合作伙伴，通过了Shopify Partner Academy认证，具备多年shopify lic主题开发经验，熟悉Liquid和各项计算机语言。