带有方形元素且无溢出的 CSS 全视口(viewport)网格

Question

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

• 占据整个视口(viewport)，尽管有很多元素也不会溢出
• 元素是平方的
• 网格在页面上垂直和水平居中

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>