grid布局
背景渐变色
网格布局，由行和列组成的一个个方格。
display: grid
一、grid布局属性
grid-auto-flow: row;// 排列的方向，row:行排列（默认）、column:列排列
grid-template-columns:// 行排列必须指定对应的列数，不指定就是一列
grid-template-columns:autoauto;// 表示两列，也可以用百分比
grid-template-rows:// 列排列必须指定对应的行数，不指定就是一行
grid-template-rows:autoauto;// 表示两行，也可以用百分比
grid-template-columns: repeat(12,1fr);// 12网格布局
grid-gap:15px15px;// 行间隙、列间隙
justify-content: center;// 在排列的方向上居中
align-items: center;// 在垂直的方向上居中二、代码实战
新建 html 文件 13-grid.html，编写下方程序，运行看看效果吧
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>grid布局</title>
<styletype="text/css">
.out-div{
width:600px;
padding:15px;
background-color: silver;
display: grid;
grid-auto-flow: row;
grid-template-columns:20%30%30%;
/**grid-auto-flow: column;
grid-template-rows: auto auto auto;**/
grid-gap:15px15px;
justify-content: center;
align-items: center;
}
.in-div{
width:100%;
height:50px;
line-height:50px;
background-color: tomato;
text-align: center;
}
</style>
</head>
<body>
<divclass="out-div">
<divclass="in-div">1</div>
<divclass="in-div">2</div>
<divclass="in-div">3</div>
<divclass="in-div">4</div>
<divclass="in-div">5</div>
</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023 年 04 月，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
