Is it possible to create a grid-like background in CSS without images or tables?

Question

I'd like to create a background that looks something like an excel spreadsheet. White table cells, thin borders around each cell. I know how to do this easily with a single image, and I know how to do this with tables...but I would like to do this without either, if possible.

The size of each cell will be fixed at 20x20, so I don't have to worry about resizing. Any thoughts? I sort of had a way cooked up that involved a ton of inner markup, but I figured that was almost as bad as using a table.

The purpose of this background will be allowing users to arrange blocks on a grid. Using jQuery UI's drag and drop functionality, I want the user to be able to move blocks around within a confined grid. The gridlines would simply show them where in the grid their blocks are bound to. An example of this grid snapping (without the gridlines) is available at http://jqueryui.com/demos/draggable/#snap-to

Answer 1

I have searched also for this problem and i found a very good solution:

background-size: 40px 40px;    
background-size: 40px 40px;    
background-image: repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 1px, transparent 40px),repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 1px, transparent 40px);

body {
    background:#000;
    z-index:-5;
}

#lines {
    background-size: 40px 40px;    
    background-image:repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 1px, transparent 40px),repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 1px, transparent 40px);
    height:100%;
    width:100%;
    opacity:0.14;
    position:absolute;
    top:0;
    left:0;
    z-index:-4;
}

<div id="overlay"></div>
<div id="lines"></div>

To change the grid size, change the background-size and the last px option within the gradient. To change the grid width change the first px option within the gradient. First gradient is horizontal, second is for the vertical lines.

for this demo I recognized that the css option:

position: absolute

was required. I will build up my grid now and if I get more information I will add them within a comment.

Hope this helps :)

Answer 2

Use a background image; don't waste your time fiddling with markup. You're not going to get any more efficient than this:

background:url(data:image/gif;base64,R0lGODlhFAAUAIAAAMDAwP///yH5BAEAAAEALAAAAAAUABQAAAImhI+pwe3vAJxQ0hssnnq/7jVgmJGfGaGiyoyh68GbjNGXTeEcGxQAOw==);

Example.