如何用css制作一个40X40的盒子网格

Question

我想制作一个带有轮廓的 40 X 40 网格，并且|我希望整个网格无需滚动即可显示，通过我的方法网格超出了屏幕，所以我必须滚动。

如果屏幕大小发生变化，单个框的大小应该发生变化，我希望网格填充整个 div。

/*this is the container */
.grid-container {
  position: absolute;
  margin: 10px;
}

/*this is the individual box*/
.node {
  width: 40px;
  height: 40px;
  outline: 1px solid #0f0e0e;
  display: inline-block;
}

<div class="grid">
  <div>
    <div class="node"></div>
    // .... 40 times
    <div class="node"></div>
  </div>
  // ....40 times
  <div>
    <div class="node"></div>
    // .... 40 times
    <div class="node"></div>
  </div>
</div>

这是一个总大小为 30 x 30 的网格，我希望能够仅使用 CSS 来做到这一点。

Answer 1

正在寻找这样的东西吗？

.grid {
   margin: 10px; 
}

/* this is the individual box */
.row {
    display: block;
}

.box{
  margin: 0px;
  display: inline-block;
  height: 40px;
  width: 40px;
  border: 1px solid black;
}

<div class="grid">
   <div class="row" >
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
   <div class="row" >
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
   <div class="row" >
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
   <div class="row" >
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
   <div class="row" >
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
   <div class="row" >
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
   <div class="row" >
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
   <div class="row" >
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
</div>

Answer 2

这是一个 20 x 20 的网格（Stack Overflow 不喜欢帖子中的字符过多，而且 HTML 很大），使用flex 显示列和行。

main 元素的高度有限，代表约束网格的外部元素，网格在水平和垂直方向上采用可用的最大尺寸。

main {
  height: 150px;
}

.grid {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.row {
  flex: 1;
  display: flex;
}

.node {
  outline: 1px solid #0f0e0e;
  flex: 1;
}

<main>
  <div class="grid">
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
    <div class="row">
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
      <div class="node"></div>
    </div>
  </div>
</main>