Fill a page with boxes using only CSS and HTML

advertisements

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>