How do I make a grid with Html and CSS with DIVS

Question

I have all my divs necessary for my tic tac toe game, however I can\'t seem to find a simpler way to make a grid and not have any borders so it\'s just a grid and not 9 full

Answer 1

Not 100% sure what your saying but lets have a look.

Here we have a grid for "tic tac toe", you can use float: left; to put 9 boxes into one container to line up these boxes in a row (3 a row due to width: 100px; and the overall container width: 300px;)

HTML:

CSS:

div {
    width: 300px;
    height: 600px;
}

div div {
    width: 100px;
    height: 100px;
    outline: 1px solid;
    float: left;
}

DEMO HERE

Now if we want the border like when you normally play the game lets do something like this:

CSS:

div {
    width: 310px;
    height: 600px;
}
div div {
    width: 100px;
    height: 100px;
    float: left;
}
div div:nth-child(-n+3) {
    border-bottom: 1px solid;
}
div div:nth-child(-n+6) {
    border-bottom: 1px solid;
}
div div:nth-child(1), div:nth-child(2), div:nth-child(4), div:nth-child(5), div:nth-child(7), div:nth-child(8) {
    border-right: 1px solid;
}

Note that its early in the morning and there could be a better was to get that layout, brain not be fully working yet. But that is a way that will work.

DEMO HERE

NOTE: Only just seen I set the height: 600px; for some reason, you can lower that to fit the box.

---

Update:

Your code with easier grid:

HTML:

 
Tic Tac Toe


    

        

        

        

        

        

        

        

        

        

    
    

        New Game
        End Game
    

CSS:

.wrapper {
    width: 330px;
    margin:0 auto;
}
.gameboard {
    width: 330px;
    height:310px;
    border:3px solid white;
    z-index: 1;
}
.gameboard div {
    width: 100px;
    height: 100px;
    float: left;
}
.middle {
    border: 1px solid;
}
.button {
    background-color:white;
    width: 160px;
    margin:0 auto;
}
.updown {
    border-top: 1px solid;
    border-bottom: 1px solid;
}
.leftright {
    border-left: 1px solid;
    border-right: 1px solid;
}

So to make it easier for you, I have based it around your code and put in an easier grid. Using classes I made to set the borders that create the layout of the game board.

DEMO HERE