Создание шахматной доски с сеткой CSS - PullRequest
Новая
       5

Создание шахматной доски с сеткой CSS

1 голос
/ 08 февраля 2020

Мне нужно создать шахматную доску с html и css (используя grid). Я создал доску и сверху и снизу. Теперь я застрял со средней частью. Я создал размер каждого поля (80px x 80px). Моя проблема в том, что отдельные field классы переполняются в нижней части моей сетки (chess-board). Как я могу исправить эту проблему, что все мои divs "поля" остаются в моей созданной сетке? 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  box-sizing: border-box;
  margin: 5%;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
}

.chess-board {
  width: 640px;
  height: 720px;
  background-color: white;
  display: grid;
  grid-template-columns: repeat(8, 80px);
  grid-template-rows: 40px repeat(8, 80px) 40px;
  grid-gap: 0;
}

.upper-numbers {
  display: grid;
  grid-column: 1/9;
  grid-row: 1/1;
  grid-auto-flow: column;
  background-color: moccasin;
}

.lower-numbers {
  display: grid;
  grid-column: 1/9;
  grid-row: 10/10;
  grid-auto-flow: column;
  background-color: moccasin;
}

.numbers {
  display: grid;
  grid-auto-flow: column;
  text-align: center;
  align-self: center;
}


/*.main-field {
    display: grid;
    grid-column: 1/9;
    grid-row: 2/10;
    background-color: white ;
}*/

.field {
  height: 80px;
  width: 80px;
}

.field:nth-child(-2n+8) {
  background-color: black;
}
<main class="chess-board">
  <section class="upper-numbers">
    <div class="numbers">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </section>

  <section class="main-field">

    <div class="field">a</div>
    <div class="field">b</div>
    <div class="field">c</div>
    <div class="field">d</div>
    <div class="field">e</div>
    <div class="field">f</div>
    <div class="field">g</div>
    <div class="field">h</div>


    <div class="field">i</div>
    <div class="field">j</div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>

    <div class="field">q</div>
    <div class="field">r</div>
    <div class="field">s</div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>

    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>

    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>

    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>

    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>

    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
  </section>

  <section class="lower-numbers">
    <div class="numbers">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </section>
</main>

1 Ответ

0 голосов
/ 08 февраля 2020

Основная проблема, с которой вы сталкиваетесь, заключается в том, что свойства сетки не наследуются за пределами дочерних элементов контейнера. Вы пытаетесь применить свойства сетки к пра-внукам, что не работает.

В вашем коде есть правило создания контейнера сетки: 

.chess-board {
    display: grid;
    grid-template-columns: repeat(8,80px);
    grid-template-rows: 40px repeat(8,80px) 40px;
 }

Но это ваш HTML: 

<main class="chess-board">

   <section class="upper-numbers">
     <div class="numbers">
       <div>1</div>
       ...
     </div>
   </section>

   <section class="main-field">
     <div class="field">a</div>
     ...
   </section>

   <section class="lower-numbers">
     <div class="numbers">
       <div>1</div>
       ...
     </div>
   </section>

</main>

С контейнером .chess-board только .upper-numbers, .main-field и .lower-numbers являются элементами сетки и могут принимать команды сетки.

Все элементы, вложенные в элементы сетки, не участвуют в макете сетки. Это стандартные элементы макета блока. Поэтому они игнорируют ваши команды grid-template-columns и grid-template-rows.

Мое предложение, если вы хотите использовать контейнер с одной сеткой и до тех пор, пока функция "подсетка" сетки не поддерживается браузерами, будет "выравнивать" «Структура HTML.

Вот простой пример, который я построил с использованием комбинации макетов сетки и гибкости. 

.chess-board {
  margin: auto;
  width: 640px;
  height: 720px;
  background-color: white;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 40px 1fr 40px;
  grid-gap: 0;
}

.upper-numbers,
.lower-numbers {
  display: flex;
  background-color: moccasin;
}

.upper-numbers>div,
.lower-numbers>div {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-field {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 640px;
}

.field {
  height: 80px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.field:nth-child(-2n+8) {
  background-color: black;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 5%;
  background-color: lightgreen;
}
<main class="chess-board">

  <section class="upper-numbers">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </section>

  <section class="main-field">
    <div class="field">a</div>
    <div class="field">b</div>
    <div class="field">c</div>
    <div class="field">d</div>
    <div class="field">e</div>
    <div class="field">f</div>
    <div class="field">g</div>
    <div class="field">h</div>
    <div class="field">i</div>
    <div class="field">j</div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field">q</div>
    <div class="field">r</div>
    <div class="field">s</div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
  </section>

  <section class="lower-numbers">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </section>

</main>

Подробнее:

...