<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.grid {
/* 网格布局 */
display: grid;
/* 每列每行之间的间距 */
gap: 20px;
/* 网格布局列散布,repeat相当于for循环 */
/* grid-template-columns: 1fr 1fr 1fr 1fr; */
grid-template-columns: repeat(4, 1fr);
}
.grid-item {
position: relative;
}
.grid-item::before {
content: ' ';
/* 设为块元素，宽度撑满 */
display: block;
background-color: blue;
/* padding-bottom和padding-top百分比是取的父元素的宽度 */
padding-bottom: 100%;
/* 宽度是父元素的宽度，高度是父元素的宽度，而后grid-item被撑成了一个正方形 */
}
/* 这中央应用相对定位脱离文档流，left:0,right:0,top:0;bottom:0，浏览器主动计算宽高，撑满整个父元素 ，不应用相对定位，他就排在before前面了*/
.con {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="grid">
<div class="grid-item">
<div class="con"></div>
</div>
<div class="grid-item">
<div class="con"></div>
</div>
<div class="grid-item">
<div class="con"></div>
</div>
<div class="grid-item">
<div class="con"></div>
</div>
<div class="grid-item">
<div class="con"></div>
</div>
</div>
</body>
</html>
发表回复