CSS完整视口网格，带有平方项且无溢出

Question

如何实现以下布局：

• 占据了完整的视口，尽管有很多物品，也不会溢出
• 项目是平方的
• 网格在页面上垂直和水平居中

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