1.今天仔细看了一下grid布局，这个妖孽属性，类似栅格布局。是flex布局的升级版本。
display:flex;本身就已经可以在移动端横行了。但是grid会让移动端布局更加灵活好用。
第一个需要掌握的就是display:grid;
display:gird直接添加一个这样的属性会出现什么效果？答案是没啥效果。
更普通布局一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-grid</title>
<style>
.grid {display: grid;}
</style>
</head>
<body>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>display:inline-grid这是什么意思?
将容器进行行内布局，该布局需要注意
· 设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
不得不设置的属性grid-template-columns（定义列宽） ，grid-template-rows（定义行高）
这个属性是grid的核心grid-template-columns: 1fr 1fr minmax(1fr, 200px);
css会提示报错。无效值
语法：minmax( [ | | min-content | max-content | auto ] , [ | | | min-content | max-content | auto ] )
本文著作权归作者 [ admin ] 享有，未经作者书面授权，禁止转载，封面图片来源于 [ 互联网 ] ，本文仅供个人学习、研究和欣赏使用。如有异议，请联系博主及时处理。
