css3中的grid布局 - 成长小破站

1.今天仔细看了一下grid布局，这个妖孽属性，类似栅格布局。是flex布局的升级版本。

cssgrid
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会提示报错。无效值

第一个需要掌握的就是display:grid;

display:inline-grid这是什么意思?

不得不设置的属性grid-template-columns（定义列宽） ，grid-template-rows（定义行高）

语法：minmax( [ | | min-content | max-content | auto ] , [ | | | min-content | max-content | auto ] )

不得不设置的属性grid-template-columns（定义列宽），grid-template-rows（定义行高）