Как создать сетку с Html и CSS с помощью DIVS

У меня есть все мои div, необходимые для моей игры tic tac toe, но я не могу найти более простой способ сделать сетку и не иметь никаких границ, поэтому это просто сетка, а не 9 полных квадратов... я подумайте, что это проблема в 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>

ЗДЕСЬ - это CSS, у меня есть 9 боксеров, мне НУЖНО СЕТКА, КАК Я ДЕЛАЮ ЭТО?

.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;

}

Ответ 1

Не 100% уверены, что вы говорите, но давайте посмотрим.

Здесь у нас есть сетка для "tic tac toe", вы можете использовать float: left;, чтобы поместить 9 ящиков в один контейнер, чтобы выровнять эти поля в строке (3 строки из-за width: 100px; и общий контейнер 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;
}

ДЕМО ЗДЕСЬ

Теперь, если нам нужна граница, например, когда вы обычно играете в игру, сделайте что-то вроде этого:

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;
}

Обратите внимание, что его ранним утром и может быть лучше, чтобы получить этот макет, мозг не будет полностью работать. Но это способ, который будет работать.

ДЕМО ЗДЕСЬ

ПРИМЕЧАНИЕ. Только что я заметил, что я установил height: 600px; по какой-либо причине, вы можете опустить это, чтобы оно было в поле.

Update:

Ваш код с более простой сеткой:

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;
}

Итак, чтобы вам было проще, я основал его вокруг вашего кода и поставил более удобную сетку. Используя классы, которые я сделал, чтобы установить границы, которые создают макет игрового поля.

ДЕМО ЗДЕСЬ

Ответ 2

Вы создаете сетку 3 × 3 в HTML и CSS, записывая таблицу 3 × 3 HTML и устанавливая размеры своих ячеек в CSS. Абсурдно не использовать таблицу для сетки tic tac toe, которая является табличной структурой, если она когда-либо была.

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

Обычно вам не нужны атрибуты id, так как вы можете ссылаться на ячейки по их структурному положению, как в CSS, так и на JavaScript, если вам не нужно поддерживать старые браузеры.

Детали зависят от подробных требований. Теперь вопрос говорит "не имеют границ", но код CSS четко устанавливает границы.

Ответ 3

~~Как @NoobEditor сказал в своем комментарии: покажите нам, что вы пробовали в следующий раз.~~

Вы можете достичь этого, используя div, размещенные рядом друг с другом, действуя как столбцы. Внутри этих div вы добавляете больше div, действуя как строки.

CSS

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

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

Пример здесь.