0
ブラウザのサイズを変更すると、レイアウト内のグリッドがジャンプし始めます。 masonry.jsを使用しようとしましたが、比例スケーリング（高さと幅を固定アスペクト比で拡大/縮小する必要があります）をサポートするようには見えません。問題は浮かんでいますか？ 98％に99％の高さから二つの大きな正方形の高さを変えることによって修正グリッドレイアウト（浮動小数点数）がめちゃくちゃ
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 0 auto;
background-color: #f3f3f3;
}
/* ---- grid ---- */
/* container defines margins and width */
.container {
margin: 0 auto;
max-width: 1200px;
margin-top: 250px;
height: 1200px;
}
/* outer container will define aspect ratio */
.outer {
position: relative;
width: 100%;
}
.outer.r4x3 {
padding-top: 30%;
/* "height" will be 3/4 of width */
}
/* inner container positioned absolutely and holds content */
.outer .inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* example content */
.little-box {
float: left;
width: 11.111%;
height: 33%;
border: 2px solid #f3f3f3;
}
.little-box-width-2 {
width: 22.222%;
}
.little-box-width-3 {
width: 33.333%;
}
.little-box-width-4 {
width: 44.444%;
}
.little-box-height-2 {
height: 66%;
}
.little-box-height-3 {
height: 99%;
}
/* just for display purposes... */
.inner::after {
content: attr(data-size);
position: absolute;
left: 0;
top: -1em;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/grid.css">
</head>
<body>
<header class="header">
</header>
<div class="container">
<div class="outer r4x3">
<div class="inner">
<div class="little-box" style="background-color: rgb(251,170,25);">
<img src="img/lege.png" style="display: block; margin: 0 auto; width:auto;max-height:100%">
</div>
<div class="little-box little-box-width-4">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box little-box-width-2">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/done/jobs.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box little-box-height-3" style="border: none;">
<div class="little-box" style="width: 100%;height: 33%;">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box" style="width: 100%;height: 33%;">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box" style="width: 100%;height: 33%;">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
</div>
<div class="little-box little-box-width-2 little-box-height-3">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box little-box-width-4 little-box-height-3">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<a href="profil2.html">
<img src="img/test.jpg" style="width: 100%;height: 100%">
</a>
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box" style=" background-color: rgb(255, 188, 0);"></div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box" style="background-color: rgb(14, 182, 211);"></div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box little-box-height-2" style="float: right;background-color: rgb(156, 89, 184);"></div>
<div class="little-box little-box-height-3 little-box-width-2" style="border: none;">
<div class="little-box" style="width: 50%;height: 33%;">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box" style="width: 50%;height: 33%;">
<img src="img/test.jpg" style="width: 100%;height: 100%">
</div>
<div class="little-box" style="width: 100%;height: 66%;background-color: yellow;"></div>
</div>
<div class="little-box little-box-height-2" style="border: none;">
<div class="little-box" style="width: 100%;height: 50%;">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box" style="width: 100%;height: 50%;">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
</div>
<div class="little-box little-box-width-3 little-box-height-2">
<a class="popup-youtube" href="https://www.youtube.com/watch?v=NFTaiWInZ44">
<img src="img/youtube.png" style="height:100%; width:100%;">
</a>
</div>
<div class="little-box" style="background-color: rgb(212, 74, 38)"></div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box" style="background-color: rgb(212, 74, 38)"></div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box" style="background-color: rgb(150, 166, 166);"></div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box" style="background-color: rgb(212, 74, 38);"></div>
<div class="little-box" style="background-color: rgb(241, 196, 15);"></div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box">
<img src="img/test.jpg" style="width:100%;height:100%;">
</div>
<div class="little-box" style="background-color: rgb(47, 204, 113);"></div>
</div>
</div>
</div>
</body>
</html>