3

I have to create a chess board with html and css (using grid). I created the board and the top and bottom. Now I am stuck with the middle part. I created the size of every field (80px x 80px) My problem is that the individual field classes overflow at the bottom of my grid (chess-board). How can I fix that problem that all my divs "field" stay in my created grid? 

* {
  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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Myriam Greger
  • 41
  • 1
  • 2

1 Answers1

1

The main problem you're encountering is that grid properties aren't inherited beyond the children of the container. You're attempting to apply grid properties to great-grand-children, which doesn't work.

In your code, you have this rule creating the grid container:

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

But this is your 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>

With .chess-board as the container, only .upper-numbers, .main-field and .lower-numbers are grid items and can accept grid commands.

All elements nested inside the grid items don't participate in grid layout. They are standard block layout elements. So they ignore your grid-template-columns and grid-template-rows commands.

My suggestion, if you want to use a single grid container, and until the grid "subgrid" feature is supported by browsers, would be to "flatten" the HTML structure.

Here's a simple example I constructed using a combination of grid and flex layouts.

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

More details:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    Hey Michael, thank you so much! I just removed one line in my html and all was running as expected. Thanks again, you made my day! – Myriam Greger Feb 08 '20 at 18:59