Creating a basic grid layout with div elements is my current challenge. You can view the live demo here.
Here's the HTML structure:
<div class="board"></div>
For JavaScript, I'm using the following snippet:
$(function() {
var boardHTML = '';
for (var r = 0; r < 2; r++) {
var row = '<div class="row">';
for (var c = 0; c < 5; c++) {
row += '<div class="cell"></div>';
}
row += '</div>';
boardHTML += row;
}
$('.board').append(boardHTML);
});
The CSS styles are as follows:
.cell {
width: 30px;
height: 30px;
outline: 1px solid black;
display: inline-block;
}
.row {
background-color: red;
}
Despite this setup, there seems to be some spacing between the rows.
QUESTION: What is causing this undesirable space?
A suggested solution involves setting the row height to 30 pixels:
.row {
height: 30px;
}
To eliminate additional space on the right side, adjusting the board's width may help:
.board {
width: 150px; /* 5 * 30px */
}
However, I'm curious if there's a more flexible approach that doesn't rely on fixed pixel values. Any thoughts or alternative solutions?