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 squares... I think it's an issue in CSS.

<html>
    <head>
        <title>First Tic Tac Toe</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Tic Tac Toe</h1>

        <div class="wrapper">
        <div class="gameboard">

            <div class="Row1">
                <div id="cell1"></div>
                <div id="cell2"></div>
                <div id="cell3"></div>
            </div>

            <div class="Row2">
                <div id="cell4"></div>
                <div id="cell5"></div>
                <div id="cell6"></div>
            </div>

            <div class="Row3">
                <div id="cell7"></div>
                <div id="cell8"></div>
                <div id="cell9"></div>
            </div>


        </div>

        <div class="button">

        <button>New Game</button>
        <button>End Game</button>

        </div>
        </div>







    </body>
</html>

HERE IS THE CSS, I HAVE 9 BOXES I NEED A GRID, HOW DO I DO THAT?

.gameboard {
    width: 330px;
    height:310px;
    border:3px solid white;
    z-index: 1;

}

.wrapper {
    width: 330px;
    margin:0 auto;
}

.button {

     background-color:white;
     width: 160px;
     margin:0 auto;

    }

.row1, .row2, .row3 {
    clear:both;

}

#cell1,#cell2,#cell3 {
    width:100px;
    height:100px;
    border:3px solid black;
    float: left;

}

#cell4,#cell5,#cell6 {
    width:100px;
    height:100px;
float: left;
    border:3px solid black;
}

#cell7,#cell8,#cell9 {
    width:100px;
    height:100px;
    float: left;
    border:3px solid black;

}

Look at my answer (the first bit) that's how you can make a grid with minimal amount of code. — Ruddy, Jan 09 '14 at 08:24
@Ruddy can you look at my css and html that I have and tell me how I can do what you've done but not by adding div div:nth-child, theres a much simpler way I believe — user3176492, Jan 09 '14 at 08:34
@user3176492 What do you mean? You want it the first or second way I did it? — Ruddy, Jan 09 '14 at 08:35

Ruddy · Answer 1 · 2014-01-09T08:45:15.287

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:

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

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:

 <h1>Tic Tac Toe</h1>

<div class="wrapper">
    <div class="gameboard">
        <div></div>
        <div class="leftright"></div>
        <div></div>
        <div class="updown"></div>
        <div class="middle"></div>
        <div class="updown"></div>
        <div></div>
        <div class="leftright"></div>
        <div></div>
    </div>
    <div class="button">
        <button>New Game</button>
        <button>End Game</button>
    </div>
</div>

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

Jukka K. Korpela · Answer 2 · 2014-01-09T10:54:25.327

8

You make a 3 × 3 grid in HTML and CSS by writing a 3 × 3 HTML table and setting the dimensions of its cells in CSS. It is absurd not to use a table for a tic tac toe grid, which is a tabular structure if there ever was one.

<style>
td { width: 1em; height: 1em; line-height: 1 }
</style>
<table>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
</table>

You normally don’t need id attributes here, as you can refer to cells by their structural position, both in CSS and JavaScript, unless you need to support ancient browsers.

The details depend on the detailed requirements. Now the question says “not have any borders”, yet the CSS code clearly sets borders.

edited Jan 09 '14 at 10:54

answered Jan 09 '14 at 09:58

Jukka K. Korpela

195,524
37
270
390

3

"It is absurd not to use a table for a tic tac toe grid" - Really? using `div` is just as good as a table. Tables are out-dated and should only really be used to display data in a quick fashion. Using a table for this just seems lazy and overall could cause problems if you wanted to style the grid. (my opinion) – Ruddy Jan 09 '14 at 10:19
7

@Ruddy, a `div` element says *nothing* about the structural role of the element, whereas in a table, the markup corresponds to division into rows and columns. And compare the simplicity of markup *and* CSS with the DIVistic approaches presented (in the question and other answers). Tables being outdates is just a (misguided) *opinion* (though a popular meme in some populations). – Jukka K. Korpela Jan 09 '14 at 10:57
"Tables being outdates is just a (misguided) opinion" - Again tables are outdated (compared to what they were used for). Remember the days where tables where used for layouts? Those days are long gone and its pretty limited what you can do with tables. Like I said before they are mainly used for displaying data in an quick and easy way. If I want to display data I would usually use `div`s to create a nice looking layout with some functionality. Table puts limits on everything you do after using it. Last thing, these are both just opinions so yeah either ither. – Ruddy Jan 09 '14 at 11:03
2

This is definitely the better answer. People are way too scared of tables because they don't understand them. – Loktar Jul 21 '14 at 22:43
guys, the main point here is "How to make a grid with DIVS" not with tables. Using tables (no matter if it's better or worse) is out of the question scope – LeonardoX Feb 07 '22 at 08:57

Benjamin · Answer 3 · 2014-01-09T08:44:51.127

3

~~Like @NoobEditor said in his comment: show us what you've tried so far next time.~~

You can achieve this by using divs floated next to each other, acting as columns. Inside those divs you add more divs acting as rows.

CSS

.column{
   float: left;
   width: 70px;
   height: 70px;
   border: 1px solid blue;
   overflow: hidden;
}

.row{
    width: 68px;
    height: 25px;
    border: 1px solid red;
}

Example here.

edited Jan 09 '14 at 08:44

answered Jan 09 '14 at 07:48

Benjamin

1,983
23
33

yeah but then theres still borders?? – user3176492 Jan 09 '14 at 08:05
2

So remove the border-tag in the CSS. I added them for clarity in the example ;) – Benjamin Jan 09 '14 at 08:41

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

3 Answers3

HTML:

CSS:

CSS:

Update:

HTML:

CSS:

Linked