Today is the first time I'm reaching out for help rather than figuring things out on my own. I'm currently working on a website layout that consists of visible tiles all with equal sizes, forming a grid structure. The challenge I face is making this grid responsive. I want the number of rows and columns to adjust based on the browser's size, while maintaining fluidity between those adjustments without any borders between the tiles. However, most browser widths do not neatly divide into pixel-perfect rows and columns. I'm considering using JavaScript to detect and calculate the leftover space on each side and distribute it among different rows and columns randomly. Do you have suggestions or a better approach for solving this issue? Thank you for any input!
Here's my current code setup (excluding my solution which seems too hacky and prone to errors).
.tile {
width:14.2857%;
height:14.2857%;
margin:0;
padding:0;
float:left;
}
<div id="macroTile">
<div id="firstRow">
<div id="tileZeroZero" class="tile"><p>(0, 0)</p></div>
<div id="tileZeroOne" class="tile"><p>(0, 1)</p></div>
<div id="tileZeroTwo" class="tile"><p>(0, 2)</p></div>
<div id="tileZeroThree" class="tile"><p>(0, 3)</p></div>
<div id="tileZeroFour" class="tile"><p>(0, 4)</p></div>
<div id="tileZeroFive" class="tile"><p>(0, 5)</p></div>
<div id="tileZeroSix" class="tile"><p>(0, 6)</p></div>
</div>
<div id="secondRow">
...
<div id="tileSixFive" class="tile"><p>(6, 5)</p></div>
<div id="tileSixSix" class="tile"><p>(6, 6)</p></div>
</div>
</div>