三个网站玩转 Grid 布局

CSS Grid 布局是现在 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不一样，CSS Grid 布局是一个二维布局系统，也就意味着它能够同时处理列和行。经过将 CSS 规则应用于父元素 (成为 Grid Container 栅格容器)和其子元素（成为 Grid Items 栅格项），你就能够轻松使用 Grid 栅格布局。

Grid 栅格布局有着目前布局中最多的属性，初学者很容易被直接劝退，本着方便你们入门的目的推荐三个学习 Grid 布局的网站。

GRID GARDEN 小游戏

《GRID GARDEN》小游戏可经过书写 CSS 代码来栽种你的胡萝卜花园！ 经过游戏来学习grid布局，很是有意思。

亲测半小时通关，可视化的带你学习了（Grid Container） grid-template 和（Grid Items）grid-area 相关属性的应用。让你不会 Grid 复杂的 API 挡在门外。 资源连接：GRID GARDEN

CSS Grid Generator 在线生成器

CSS Grid Generator 是一个由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 能够直观的帮咱们建立栅格模型，Grid 布局是栅格的艺术，创建一个基于栅格的思惟也是很重要的，CSS Grid Generator 可让你更快的对总体布局认识，值得推荐。

资源连接：CSS Grid Generator

A Complete Guide to Grid 学习导航

CSS Tricks是一个国外的优秀前端开发博客，主要分享使用CSS样式的技巧、经验和教程等。值得前端开发者阅读收藏的国外网站。

其中的 Guides板块 A Complete Guide to Grid 深刻浅出的系统介绍了 Grid 布局的众多API，代码配合插图让咱们学习起来更容易。教程质量很高值得一看。

CSS-Tricks网站是一个很是优秀的网站，特别对于CSSer而言，该网站不断的在更新一些优秀的教程和技巧，为前端社区作出了具大的贡献。

资源连接：A Complete Guide to Grid

Grid 布局学习重点

1. 如何利用好 grid-template 系列属性对设计稿进行合理划分以栅格化。

display
grid-template-columns
grid-template-rows
grid-gap
grid-template-areas
grid-auto-flow
grid-auto-columns:
复制代码

2. 如何利用好 grid-area 系列属性对容器内部内容进行定位

grid-column-start
grid-column-end 
grid-row-start 
grid-row-end 
grid-column 。
grid-row 
grid-area 
复制代码

3. 还有一些相对于轴定位的属性如 justify-item , align-content 这类属性与 flex 布局中大体一致。能够迁移学习

justify-item
justify-content
justify-self
align-item
align-content
align-self
复制代码

总结

2021年了浏览器的兼容问题已经再也不是最头疼的一个问题了，Grid 布局有着极高的适应性和灵活性，grid不会代替flex, 相反他两位是很是棒的搭档，能够搭配flex解决不少棘手的问题，弥补了flex的一些缺陷，值得咱们一学。

❤️ 感谢你们

若是你以为这篇内容对你挺有有帮助的话：

点赞支持下吧，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）

关注公众号咸鱼爱前端，咱们一块儿学习一块儿进步。

以为不错的话，也能够阅读其余文章（感谢朋友的鼓励与支持🌹🌹🌹）：

Nodejs 实现定时爬虫

React-Query 让你的状态管理更优雅

前端页面布局学习神器

面试必备知识点之深浅拷贝

SPA 前端路由原理与实现