带有方形项目且没有溢出的 CSS 完整视口网格答案

【问题标题】：CSS full viewport grid with squared items and no overflow带有方形项目且没有溢出的 CSS 完整视口网格
【发布时间】：2019-10-16 10:22:27
【问题描述】：

我将如何实现这样的布局：

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

【问题讨论】：

标签： css viewport-units

【解决方案1】：

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

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>

【讨论】：

感谢您的回答。那很接近。它只是缺少平方网格项目。想详细说明一下吗？再次感谢并提前:)
对不起，我忘记了，我编辑了答案以使项目成为正方形。