Say you've got a 100px by 100px container. You want to fill it with 5px by 5px "boxes". For the sake of simplicity you can ignore padding, border width, margin. Is there a way to declaratively do this using only CSS and HTML (without manually declaring the exact amount of boxes)?
Edit: My original intention was that the boxes are in fact elements. But I appreciate the creativity.
If these "boxes" are individual HTML elements, then no, that is not possible with just HTML and CSS. You would need to use server-side code or JavaScript to generate them.
If these "boxes" are just visual elements, you can use a 5px by 5px background image, and then set background-repeat: repeat;
in the CSS.
div {
width: 100px;
height: 100px;
background: url("http://i.stack.imgur.com/lOtMo.png")
repeat
top left/5px 5px;
}
<div></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With