css 如何创建一个HTML网格的圆圈响应填充视口？

我的目标是创建一个响应式的“点网格”。在标题之后，我想用一个均匀分布的点网格填充页面的其余部分。理想的结果看起来像下面的图像：

考虑到标题的高度 * 可变 *，并使用大小与视口宽度 * 成比例 * 的圆圈填充屏幕的其余部分，构建此网格的方向是什么？
我的项目的当前状态是这样的：

<!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>

我不建议您这样做，但为了直接回答您的问题，这里有一个根据您的要求生成自适应圆的简单示例：

createCircles();
window.onresize = createCircles;

function createCircles() {
  const columns = 16;
  const cellCircles = 3;

  const circles = document.querySelector('.circles');
  circles.innerHTML = '';
  const cellWidht = circles.offsetWidth / columns;
  const cellHeight = cellWidht / cellCircles;
  const rows = Math.floor(circles.offsetHeight / cellHeight);
  let html = '';
  let cell = '<div class="cell">';
  for (let i = 0; i < cellCircles; i++ ){
    cell += '<i></i>';
  }
  cell += '</div>';
  for (let i = 0; i < columns * rows; i++) {
    html += cell;
  }

  circles.innerHTML = html;
}

* {
  box-sizing: border-box;
  margin:  0;
}

body {
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr;
  padding: 4px;
}

.circles {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  min-height: 0;
  grid-gap: 4px 8px;
}

.cell {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2px;
}

.cell i {
  aspect-ratio: 1;
  border: solid 1px #ccc;
  border-radius: 50%;
}

<h1>Title</h1>
<div class="circles"></div>

css 如何创建一个HTML网格的圆圈响应填充视口？

1条答案

相关问题

热门标签

最新问答