Создание шахматной доски с помощью CSS Grid

Question

Создание шахматной доски с помощью CSS Grid

Мне нужно создать шахматную доску с html а также css (с помощью grid). Я создал доску и верх и низ. Теперь я остановился на средней части. Я создал размер каждого поля (80px Икс 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>

3

html css css-grid

Источник

user12406929 08 фев '20 в 14:21

1 ответ

Другие вопросы по тегам html css css-grid

user3597276 08 фев '20 в 15:03 2020-02-08 15:03 · Answer 1 · 2020-02-08 15:03

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

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

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

Подробнее: