本文正在参加「金石计划」
简介
在我们动手画考拉之前，我们先来介绍一下grid布局吧，grid布局又叫网格布局，是一种新的CSS模型，grid布局是将一个页面通过行和列划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，以达到我们需要的布局效果， 同时grid布局又叫网格布局布局也是是目前CSS唯一的二维布局。
grid 与 flex的区别
grid布局和flex布局的实质性区别是：flex是一维布局，只处理一个维度上的布局，一行或者是一列，但是grid布局是二维布局，将容器划分成了“行”和”列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。
现在我们已经了解了什么是grid布局，那接下来请听题！
grid布局的应用
首先给你一份CSS和HTML代码：
html,
body {
background: #f8d8ab;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.ears {
display: flex;
justify-content: space-between;
position: relative;
top: 240px;
width: 550px;
}
.ear {
width: 250px;
height: 250px;
border-radius: 50%;
background: #738394;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 150px;
height: 150px;
border-radius: 50%;
background: #f6b9bf;
}
<body>
<div class="container">
<div class="ears">
<div class="ear left">
<div class="inner"></div>
</div>
<div class="ear right">
<div class="inner"></div>
</div>
</div>
<div class="face">
<div class="eye left"></div>
<div class="eye right"></div>
<div class="blush left"></div>
<div class="blush right"></div>
<div class="nose"></div>
</div>
</div>
</body>
我们先来看看这段代码的效果：
现在需要我们用grid布局给考拉补充考拉的脸部特征，最终实现的效果是：
给face创建一个网格布局
第一步我们需要拿到 face 为考拉创建一个网格布局, 以便于我们将考拉的脸部特征填充进去。
.face {
z-index: 1;
width: 430px;
height: 380px;
background: #a0abb6;
border-radius: 50%;
align-items: center;
display: grid;
}
实现了一个这样的脸部布局：
给考拉画上上眼睛
当我们完成了考拉的脸部的gird布局之后，我们该给考拉画上眼睛了
.eye {
/*
长为 30px
高为 30px
颜色为 #090b0e
圆角为 50%
位置居中
*/
display: grid;
width: 30px;
height: 30px;
background-color: #090b0e;
border-radius: 50%;
}
.eye.left {
grid-area: 2/2/3/3;
}
.eye.right {
grid-area: 2/5/3/6
}
给考拉画上脸红
眼睛已经画好了，那接下来我们来给考拉补上脸红。
.blush {
/*
长为 40px
高为 30px
颜色为 #f6b9bf
圆角为 50%
*/
height: 30px;
width: 40px;
background-color: #f6b9bf;
border-radius: 50%;
}
.blush.left {
grid-area: 2/1/3/2;
justify-self: end;
align-self: end;
}
.blush.right {
grid-area: 2/6/3/7;
justify-self: start;
align-self: end;
}
给考拉画上鼻子
最后一步我们给考拉补上鼻子。
.nose {
/*
高为 100%
颜色为 #3b464f
上方圆角为 50%
下方圆角为 40%
按照图示选取 grid-area
*/
height: 100%;
background-color: #3b464f;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 40%;
border-bottom-left-radius: 40%;
grid-area: 3/2/4/6;
}
关于gird布局属性
我们使用了gird布局完成了对考拉的绘制，那接下来我再来给大家介绍一下其中用到了的关于gird的属性吧！
网格设置
dispaly:gird
创建了一个gird布局的容器
grid-template-columns 和 grid-template-rows
grid-template-columns用于定义每一列的宽度，grid-template-rows用于定义每一行的高度，可以接收px、rem等长度、百分比、以 fr 为单位的数据。
对齐方式
justify-items 和 align-items
justify-items 属性设置单元格内容的水平位置， align-items 属性设置单元格内容的垂直位置。
start紧靠单元格起始位置（左或上）；end紧靠单元格结束位置（右或下）；center居中；stretch拉伸，默认值，占满整个单元格；
justify-self 、 align-self
justify-self 、 align-self和上面 justify-items 、 align-items 的功能差不多，两者可选参数也是一样的，唯一不同的就是它们作用于单体。
元素排布
grid-area
grid-area是一种对于 grid-row-start 、grid-column-start、grid-row-end 和 grid-column-end的简写，通过基线（line），跨度（span）或没有（自动）的网格放置在 grid row 中指定一个网格项的大小和位置，继而确定 grid area的边界。、
第一个参数为grid-row-start， 第二个参数为grid-column-start， 第三个参数为grid-row-start， 第四个参数为grid-column-end。
