CSS 带方形项目且无溢出的完整视口网格

Question

我如何实现这样的布局：

尽管项目数量多，但仍占据整个视口且不会溢出
项目是平方的
网格在页面上垂直和水平居中

Answer 1

这就是你想要做的事情？在这种情况下，您需要根据数量定义项目 height/width 的百分比。

body {
   margin:0;
   padding:0;
   text-align:center;
  } 
  
  .container {
   align-items:center;
   display:flex;
   justify-content:center;
   height:100vh;
   width:100vw; 
  }
  
  .content {
   align-items:center;
   display:flex;
   flex-wrap:wrap;
   height:100vw;
   justify-content:center;
   margin:auto;
   width:100vw; 
  }
  
  .item {
   border:1px solid #AAA;
   height:calc(20% - 4px);
      margin:1px;
   width:calc(20% - 4px);
  }
  
  @media (orientation:landscape) {
   .content {
      height:100vh;
      width:100vh;
   }
  }

<div class="container">
       <div class="content">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
 </div>

CSS 带方形项目且无溢出的完整视口网格

CSS full viewport grid with squared items and no overflow

css

viewport-units