grid布局入门

grid网格布局

简单了解

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

如何快速上手简单的布局

小编最近也在学习网格布局，该说不说，这玩意确实好用，相信刚上手的朋友们和小编一样，因为各种各样的属性搞得晕头转向的，但是小编找了一个游戏，能让我们快速上手 练习小游戏

游戏图片

上面有简单的介绍，和怎么运用，而且它给的还有提示，已经完成基本代码，只需要我们编写一行就行，而且没有时间限制，我们可以慢慢测试，慢慢研究是怎么实现的

CV大法

相信也有不少人，比起自己写，还是C V来的快，那么这个就适合有这些小九九的人CSS Grid Generator

通过修改边距和栅格，可以很容易的完成，随后即可查看生成的代码，点击“请给我示例中的代码”

生成的代码如下

<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 是一个由Sarah Drasner创建的免费工具。它是一个可视化设计工具，允许咱们创建一个基本的 Grid 布局，然后就可以使用生成对应的代码，帮助咱们快速布局。

A Complete Guide to Grid 学习导航

CSS Tricks是一个国外的优秀前端开发博客，主要分享使用CSS样式的技巧、经验和教程等。值得前端开发者阅读收藏的国外网站,其中的 Guides板块 A Complete Guide to Grid 深入浅出的系统介绍了 Grid 布局的众多API，代码配合插图让我们学习起来更容易。教程质量很高值得一看。

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

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

总结

Grid 布局有着极高的适应性和灵活性，grid不会代替flex, 相反他两位是非常棒的搭档，可以搭配flex解决很多棘手的问题，弥补了flex的一些缺陷，值得我们一学。

感谢一位朋友给我的方法 @咸鱼爱前端