持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第22天，点击查看活动详情
CSS网格
Grid是帮助你快速调整“二维布局”，用于构建复杂的响应布局。它通过把 HTML 元素转换为具有行和列的网格容器，以便将子元素放置在所需要的位置～
dispaly:grid
属性display的值设为grid，HTML 元素就可以变为网格容器
<style type="text/css">
.d1{background:Blue;} //第一行蓝色
.d2{background:Pink;} //第二行粉红色
.d3{background:Green;} //第三行绿色
.container {
font-size: 50px;
width: 100%;
background: LightGray;//背景亮灰色
display: grid;
}
</style>
<body>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
</div>
</body>
grid-template-columns & # grid-template-rows
grid-template-columns：添加多列
grid-template-rows：添加多行
<style type="text/css">
.d1{background:Blue;} //第一行蓝色
.d2{background:Pink;} //第二行粉红色
.d3{background:Green;} //第三行绿色
.container {
font-size: 50px;
width: 100%;
background: LightGray;//背景亮灰色
display: grid;
grid-template-columns: 200px 200px;//添加多列
}
</style>
<body>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
</div>
</body>
特别：如何改变行和列的大小
-
fr：设置列或行占剩余空间的比例 -
auto：设置列宽或行高自动等于它的内容的宽度或高度 -
%：将列或行调整为它的容器宽度或高度的百分比
<style type="text/css">
.d1{background:Blue;} //第一行蓝色
.d2{background:Pink;} //第二行粉红色
.d3{background:Green;} //第三行绿色
.container {
font-size: 50px;
width: 100%;
background: LightGray;//背景亮灰色
display: grid;
grid-template-columns: 50px 10% 1fr;
//第一列宽是50px
//第二列的宽是父元素的10%
//将剩余空间分成三份，第三列占其中一份
}
</style>
<body>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
</div>
</body>
写在最后
重新开始更文啦！最近忙了一段时间，终于继续可以学习！感谢大家的支持！我会继续努力坚持学习！养成了好习惯，每天必定会抽出时间多多少少学习前端知识～
以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～ （学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）
附上学习链接，感谢这些大佬出题和解答：
