Griglie con i div

Volevo sapere se è possibile creare una griglia con div e css.

Una vera è propria scacchiera,se è possibile come?

intendi una cosa del genere? riporto di seguito

css:

Codice HTML:

---


.box1 {
        float: left;
        height: 50px;
        width: 50px;
}
#box2 {
        height: 50px;
        width: 50px;
}
.box3 {
        float: left;
        height: 50px;
        width: 50px;
}
.box1 #color {
        background-color: #000000;
        height: 50px;
        width: 50px;
}
.box3 #color2 {
        background-color: #000000;
        height: 50px;
        width: 50px;
}
.box1 #color3 {
        background-color: #000000;
        height: 50px;
        width: 50px;
}

---

div:

Codice HTML:

---

<div class="box1"><div id="color"></div></div>
<div class="box1"></div>
<div class="box1"><div id="color3"></div></div>
<div class="box1"></div>
<div id="box2"></div>
<div class="box3"></div>
<div class="box3"><div id="color2"></div></div>
<div class="box3"></div>
<div class="box3"></div>

---

se li vuoi attaccati devi levare il margin da #box2

un altro metodo più semplice può essere questo :

css:

Codice HTML:

---

#tot1 {
        height: 50px;
        width: 100px;
}
#tot1 #box1 {
        background-color: #000000;
        height: 50px;
        width: 50px;
}
#tot2 {
        height: 50px;
        width: 100px;
}
#tot2 #box2 {
        height: 50px;
        width: 50px;
        float: left;
}
#tot2 #box3 {
        background-color: #000000;
        float: left;
        height: 50px;
        width: 50px;
}

---

div:

Codice HTML:

---

<div id="tot1">
<div id="box1">
</div>
</div>
<div id="tot2">
<div id="box2"></div>
<div id="box3">
</div>
</div>

---

Ok ci siamo,grazie tanto.
Ora dovrei realizzare un piccolo script per creare questa griglia,sai per cosa mi serve,per creare l'interfaccia di un browser game in tempo reale,avendo la griglia e un'id per ogni quadrato posso gestire alla grande lo spazio.

Grassieee

Codice HTML:

---

<style>
.block {
        background-color: #000000;
        border: 1px dotted white;
        float: left;
        height: 50px;
        width: 50px;
}
.p_block {
        background-color: #000000;
        border: 1px dotted white;
        height: 50px;
        width: 50px;
}
</style>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="p_block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

---