本文已参与「 新人创作礼 」活动，一起开启掘金创作之路
其实做了工作很多年的前端，有人问我Grid用的如何，我只能说我知道这个东西，也没有把他放在心上，在没有Css出来的时候，例如Flex、Grid。
差不多所有的布局我都是能够手写搞定的，当然随着前端不断的发展，我对Css的专研也是慢慢失去了热情，觉得一切靠曾经的拿点功底页面布局基本可以的躺平过去。
对于对Grid的了解也来源于外面说Grid的兼容性的诸多问题。也是我一直没有考虑的原因，直到这几年，Chrome的市场占有率持续高升，已经独领半壁江山了，IE的份额貌似已经低至10%以下。
但是最近刚换工作，项目里面大部分都是Flex & Grid的相关东西。包括其他都是我不曾熟悉的技术栈体系。
前几天我已经花了半天时间把Css部分的 styled-components 、flex，好好的研究了一番，基本项目够用了。
我今天也是确实无聊了，为了写文章，就看看了Grid。
在一个公司待久了，很容易在一个公司躺平，结果就是一直吃老本，所以如果想技术有持续的提升，你就要对技术保持足够的好奇心，当你在一个公司长时间无法提升的时候，可以考虑动一动地方。
不闲扯了，来讲讲Grid的牛逼之处应用了。
例如实现这个红心十布局你会如何布局呢？
如果用div的传统样式，也是不难，大家可以哪来比较下。
<!-- 红十字会实现 -->
<div class="wrapper1">
<div><div></div></div>
<div></div>
<div><div></div></div>
</div>
css 貌似写的比较多
.wrapper1 {
width:120px;
height:120px;
background:white;
div {
height:40px;
background:black;
}
div:nth-child(1) , div:nth-child(3) {
text-align: center;
width:100%;
div {
display: inline-block;
width:40px;
height:40px;
background:red;
}
}
div:nth-child(2) {
background:red;
}
}
等等我们看看Flex、Grid的在说。
Flex 布局，这个还是不错，貌似很简单把。
<div class="wrapper2">
<div></div>
<div></div>
<div></div>
</div>
下面的是css
.wrapper2 {
display: flex;
width:120px;
height:120px;
flex-direction: column;
div:nth-child(1) , div:nth-child(3) {
flex: 1;
width:40px;
background:red;
margin:auto;
}
div:nth-child(2) {
flex: 1;
background: red;
}
}
下面最牛逼的地方是，通过Grid的方式。
<div class="wrapperggg">
<div></div>
<div></div>
<div></div>
</div>
精妙之处在css
.wrapperggg {
display: grid;
grid-template-columns: repeat(3,40px);
grid-template-rows: repeat(3,40px);
grid-template-areas: 'a b c' 'd d d' 'g h i';
div {
background: red;
}
div:nth-child(1) {
grid-area: d;
}
div:nth-child(2) {
grid-area: b;
}
div:nth-child(3) {
grid-area: h;
}
}
PS： 差不多这些了， 有点累了，一天说一个小Demo，也是非常有趣的。
大家也可以去掘金的看看我录进去的代码Demo
