My goal is to create a series of equally sized elements with consistent spacing. I want these elements to be evenly distributed both horizontally and vertically on the page, adjusting accordingly to changes in screen size or number of elements. The challenge lies in ensuring that the layout remains dynamically responsive, with elements resizing and rearranging as needed. Additionally, I aim for the bottom row to align neatly with those above it.
Here's my current approach:
HTML
<div class="outer">
<div class="inner">
</div>
</div>
... repeat for each block.
<div class="outer">
<div class="inner">
</div>
</div>
CSS
body {
text-align: justify;
margin:0;
width: auto;
}
.outer {
background:blue;
width: 100px;
height: 90px;
display: inline-block;
text-align: center;
}
.inner {
background:red;
width: 90px;
height: 90px;
display: inline-block;
text-align: center;
}