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>