Grid布局常用样式设置:
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 给每一行设置宽度 */
/* 设置换行自动补充空地 mixmax设置最小值和最大值 */
grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
/* fr 分数 有平分的意思 */
grid-template-rows: 50px 100px 200px; /* 给每一列设置高度 */
grid-auto-rows: auto; /* 自适应 等于本身的高度 也可以设置指定的高度 */
row-gap: 10px; /* 设置每一行的外边距 */
column-gap: 5px; /* 设置每一列的外边距 */
gap: 8px; /* 设置每一行/每一列的外边距 */
html练习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giid表格布局</title>
<style>
.container>div{
border-radius: 5px;
padding: 10px;
background-color: rgb(207, 232, 220);
border: 2px solid rgb(79, 185, 227);
}
.container{
display: grid;
/*grid-template-columns: 1fr 1fr 1fr;*/ /* 给每一行设置宽度 */
grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); /* 设置换行自动补充空地 mixmax设置最小值和最大值 */
/* fr 分数 有平分的意思 */
/* grid-template-rows: 50px 100px 200px; */ /* 给每一列设置高度 */
grid-auto-rows: auto; /* 自适应 等于本身的高度 也可以设置指定的高度 */
/* row-gap: 10px; 设置每一行的外边距 */
/* column-gap: 5px; 设置每一列的外边距 */
gap: 8px; /* 设置每一行/每一列的外边距 */
}
</style>
</head>
<body>
<h1>Simple Grid Example</h1>
<div class="container">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
</div>
</body>
</html>
页面结果图: