我的目标是创建一个响应式的“点网格”。在标题之后,我想用一个均匀分布的点网格填充页面的其余部分。理想的结果看起来像下面的图像:
考虑到标题的高度 * 可变 *,并使用大小与视口宽度 * 成比例 * 的圆圈填充屏幕的其余部分,构建此网格的方向是什么?
我的项目的当前状态是这样的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dot Grid</title>
</head>
<style>
.header {
height: 3vw;
width: 100%;
}
.header h2 {
width: 100%;
height: 100%;
text-align: center;
}
.dot-grid {
width: 100%;
background-color: white;
overflow: hidden;
}
.container-box {
width: 100%;
height: 100%;
padding: 2px 0;
}
.dots-wrapper {
display: grid;
position: relative;
grid-template-columns: repeat(16, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 10px;
width: 100%;
padding: 0 10px;
overflow: hidden;
}
.dots-wrapper .grid-container {
width: 100%;
list-style: none;
}
.grid-container .circle-group {
display: flex;
width: 100%;
padding: 0;
margin-top: 0;
justify-content: center;
}
.dots-wrapper div.grid-container:last-child {
margin-bottom: 0;
}
.circle-group .circle {
width: 1.95vw;
height: 1.95vw;
border: 1px solid darkgray;
border-radius: 40px;
list-style: none;
margin: 0 0.1vw;
}
</style>
<body>
<header class="header">
<h2>Dot Grid Header</h2>
</header>
<div class="dot-grid">
<div class="container-box">
<div class="dots-wrapper">
<div class="grid-container">
<ul class="circle-group" style="margin-bottom: 5px;">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
<ul class="circle-group" style="margin-bottom: 5px;">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
<ul class="circle-group" style="margin-bottom: 5px;">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
<ul class="circle-group" style="margin-bottom: 5px;">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
<ul class="circle-group" style="margin-bottom: 5px;">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
<ul class="circle-group" style="margin-bottom: 5px;">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
<ul class="circle-group" style="margin-bottom: 5px;">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
1条答案
按热度按时间k10s72fa1#
我不建议您这样做,但为了直接回答您的问题,这里有一个根据您的要求生成自适应圆的简单示例: