What could be causing my chessboard to not wrap around properly with flexbox?

Question

What could be causing my chessboard to not wrap around properly with flexbox?

I have been working on creating an 8x8 chessboard by following this example: https://codepen.io/sammyslamma/pen/gJeOwY

  
    .flex-container {
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
        height: 336px;
        width: 336px;
    }

    .chessboard {
        border: 1px solid black;
        width: 40px;
        height: 40px;
    }

    .chessboard div:nth-child(odd) {
        background-color: blue;
    }

    <div class="flex-container">
        <div id="tile">
        <script>
        for(x=0; x<64;x++) {
          var tile = document.createElement('div');
          tile.className = "chessboard";
          document.getElementById('tile').appendChild(tile); }
        </script>
        </div>
    </div>

I have created 64 divs under the class name "chessboard", but I am having trouble making the squares go across to form an 8 by 8 grid. I have tried setting the height, width, and flex-basis to 12.5%, but it didn't work as expected.

Any guidance on how to achieve the desired layout would be greatly appreciated. Thank you!

javascript html css flexbox

Answer 1

Answer №1

Let's address a couple of important errors in the example you provided:

display: flex only affects the direct children of an element - in this case, the element #tile is considered the child, while your .chessboard elements remain unaffected.

Regarding the coloring, the selector .chessboard div:nth-child(odd) targets odd-child divs within .chessboard, not the chessboard elements themselves.

However, if you intend to create an actual chessboard, the current approach may not be suitable due to two main reasons:

A chessboard is traditionally an 8x8 grid, not a single array of squares. Flexbox may arrange children in a way that creates rows with 7 or 9 squares, which is not ideal.
The pattern of odd numbering is incorrect for a chessboard; you should have odd numbers in even rows and even numbers in odd rows.

While some have suggested using CSS grid, an alternative solution could be utilizing the classic <table> element in HTML. Here's an example implemented using Haml for simpler HTML creation: https://codepen.io/anon/pen/rgdNgq?editors=1111.

The key CSS styles applied are:

.chess-board {
  border: 1px solid gray;
  border-collapse: collapse;
  border-spacing: 0;
}

.chess-board td {
  padding: 0;
  width: 4rem;
  height: 4rem;
}

.chess-board tr:nth-child(odd) td:nth-child(even),
.chess-board tr:nth-child(even) td:nth-child(odd){
  background: #222;
}

Using a table structure ensures a fixed 8x8 grid for the chessboard, which is more suitable for this specific layout. While CSS Grid can also achieve this, it offers more flexibility in grid structures, which is unnecessary in this case.

Additionally, a table structure allows for easier navigation and styling of individual rows and columns compared to ungrouped cells, where you would need to calculate each cell's position manually.

Answer 2

Let's address a couple of important errors in the example you provided:

display: flex only affects the direct children of an element - in this case, the element #tile is considered the child, while your .chessboard elements remain unaffected.

Regarding the coloring, the selector .chessboard div:nth-child(odd) targets odd-child divs within .chessboard, not the chessboard elements themselves.

However, if you intend to create an actual chessboard, the current approach may not be suitable due to two main reasons:

A chessboard is traditionally an 8x8 grid, not a single array of squares. Flexbox may arrange children in a way that creates rows with 7 or 9 squares, which is not ideal.
The pattern of odd numbering is incorrect for a chessboard; you should have odd numbers in even rows and even numbers in odd rows.

While some have suggested using CSS grid, an alternative solution could be utilizing the classic <table> element in HTML. Here's an example implemented using Haml for simpler HTML creation: https://codepen.io/anon/pen/rgdNgq?editors=1111.

The key CSS styles applied are:

.chess-board {
  border: 1px solid gray;
  border-collapse: collapse;
  border-spacing: 0;
}

.chess-board td {
  padding: 0;
  width: 4rem;
  height: 4rem;
}

.chess-board tr:nth-child(odd) td:nth-child(even),
.chess-board tr:nth-child(even) td:nth-child(odd){
  background: #222;
}

Using a table structure ensures a fixed 8x8 grid for the chessboard, which is more suitable for this specific layout. While CSS Grid can also achieve this, it offers more flexibility in grid structures, which is unnecessary in this case.

Additionally, a table structure allows for easier navigation and styling of individual rows and columns compared to ungrouped cells, where you would need to calculate each cell's position manually.

Answer 3

Answer №2

Add the class "flex-item" to the inner div element.

.flex-item {
 justify-content: center;
 align-items: center;
}

Answer 4

Add the class "flex-item" to the inner div element.

.flex-item {
 justify-content: center;
 align-items: center;
}

Answer 5

Answer №3

Take advantage of grids instead of flexbox with this code snippet.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 1px;
  max-width: 640px
}

.chessboard {
  border: 1px solid black;
  width: 80px;
  height: 80px;
  margin: 1px 
}

<div id="tile" class="container">
  <script>
   for(x=0; x<64;x++) {
     var tile = document.createElement('div');
     tile.className = "chessboard";
     document.getElementById('tile').appendChild(tile);}
   </script>
 </div>

Answer 6

Take advantage of grids instead of flexbox with this code snippet.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 1px;
  max-width: 640px
}

.chessboard {
  border: 1px solid black;
  width: 80px;
  height: 80px;
  margin: 1px 
}

<div id="tile" class="container">
  <script>
   for(x=0; x<64;x++) {
     var tile = document.createElement('div');
     tile.className = "chessboard";
     document.getElementById('tile').appendChild(tile);}
   </script>
 </div>

What could be causing my chessboard to not wrap around properly with flexbox?

Answer №1

Answer №2

Answer №3

Similar questions

Increase value by 1 with the push of a button within two specified ranges using JavaScript

In a Vue serverless web application, OpenLayers Map object fails to trigger events

Creating valuable properties in TypeScript is a skill that requires knowledge and practice

Drop and drag the spotlight

Menu Overlay (jQuery/CSS)

Creating a Cascading State and City Dropdown Using Knockout JS and JSON Data

What is the best way to dynamically change the main content based on the sidebar option chosen in a React application?

Detecting a targeted POST event in JavaScript without any libraries

Calculating and displaying the output on an HTML page: A step-by-step guide

The Stencil EventEmitter fails to send data to the Vue instance

Retrieve a value from a PHP database table and transfer it to a different PHP webpage

Obtain the final result once all promises have been successfully resolved in a loop

Send a file from a form using Gatsby to getform.io using the axios library

Create dynamic Bootstrap 4 menus featuring three levels of navigation - the initial dropdown sub-menu may not display any selectable options

Tips for designing a horizontal sub-navigation menu using CSS?

Secondary menu

What is the best way to include a new class into the current class in this particular scenario?

Plupload is not compatible with ng-dialog

Using jQuery to create clickable URLs within a rollover div

Animation controlled by a button