css3中的grid布局
1.今天仔细看了一下grid布局，这个妖孽属性，类似栅格布局。是flex布局的升级版本。
css3中的grid布局
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( [ <length> | <percentage> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] )
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020年04月28日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
