What's the best way to arrange buttons in a vertical stack?

Question

What's the best way to arrange buttons in a vertical stack?

Currently, I am working on a project that requires stacking multiple buttons on top of each other without any gaps in between. Here is my existing code:

This is the desired outcome:

Can this be achieved using CSS?

The function I am currently using accepts a height and width to create a grid of buttons.

function createBoard (height, width)
{
    for (let h = 0; h < height; h++)
    {
        for (let w = 0; w < width; w++)
        {
            let button = document.createElement('button');
            button.setAttribute('class', 'pixel');
            document.body.appendChild(button)
            if (w == width - 1)
            {
                let br = document.createElement('br');
                document.body.appendChild(br)
            }
        }
    }
}

createBoard(5,10);

.pixel {
    margin:0;
    background-color: rgb(31, 31, 31);
    padding: 10px;
    display:inline-block;
    border: none;
}

.pixel:hover {
    background-color: rgb(73, 73, 73);
}

javascript html css

Answer 1

Answer №1

Here is an updated version of your JavaScript code that creates rows of buttons and adds them to a container. Both the rows and the container have display: flex property applied to them for proper alignment.

function createBoard (height, width)
{
    for (let h = 0; h < height; h++) {
        const row = document.createElement('div');
        row.classList.add('row');

        for (let w = 0; w < width; w++) {
            const button = document.createElement('button');
            button.classList.add('pixel');
            row.append(button);
        }

        document.querySelector('.container').append(row);
    }

}
createBoard(10, 10);

.container {
    display: flex;
    flex-direction: column;
}

.container .row {
    display: flex;
}

.container .row .pixel {
    margin: 0;
    background-color: rgb(31, 31, 31);
    padding: 10px;
    display: inline-block;
    border: none;
}

.container .row .pixel:hover {
    background-color: rgb(73, 73, 73);
}

<div class="container"></div>

Another approach would be to utilize grid, where you need to specify the width of each pixel to create your desired grid layout within the container.

function createBoard (height, width)
{
    document.querySelector('.container').style.gridTemplateColumns = 'repeat('+width+', 20px)';
    for (let h = 0; h < height; h++) {
        for (let w = 0; w < width; w++) {
            const button = document.createElement('button');
            button.classList.add('pixel');
            document.querySelector('.container').append(button);
        }
    }

}
createBoard(10, 10);

.container {
    display: grid;
    flex-direction: column;
}
.container .pixel {
    margin:0;
    background-color: rgb(31, 31, 31);
    display:inline-block;
    border: none;
    width: 20px;
    height: 20px;
}

.container .pixel:hover {
    background-color: rgb(73, 73, 73);
}

<div class="container"></div>

Answer 2

Here is an updated version of your JavaScript code that creates rows of buttons and adds them to a container. Both the rows and the container have display: flex property applied to them for proper alignment.

function createBoard (height, width)
{
    for (let h = 0; h < height; h++) {
        const row = document.createElement('div');
        row.classList.add('row');

        for (let w = 0; w < width; w++) {
            const button = document.createElement('button');
            button.classList.add('pixel');
            row.append(button);
        }

        document.querySelector('.container').append(row);
    }

}
createBoard(10, 10);

.container {
    display: flex;
    flex-direction: column;
}

.container .row {
    display: flex;
}

.container .row .pixel {
    margin: 0;
    background-color: rgb(31, 31, 31);
    padding: 10px;
    display: inline-block;
    border: none;
}

.container .row .pixel:hover {
    background-color: rgb(73, 73, 73);
}

<div class="container"></div>

Another approach would be to utilize grid, where you need to specify the width of each pixel to create your desired grid layout within the container.

function createBoard (height, width)
{
    document.querySelector('.container').style.gridTemplateColumns = 'repeat('+width+', 20px)';
    for (let h = 0; h < height; h++) {
        for (let w = 0; w < width; w++) {
            const button = document.createElement('button');
            button.classList.add('pixel');
            document.querySelector('.container').append(button);
        }
    }

}
createBoard(10, 10);

.container {
    display: grid;
    flex-direction: column;
}
.container .pixel {
    margin:0;
    background-color: rgb(31, 31, 31);
    display:inline-block;
    border: none;
    width: 20px;
    height: 20px;
}

.container .pixel:hover {
    background-color: rgb(73, 73, 73);
}

<div class="container"></div>

Answer 3

Answer №2

To achieve this task, CSS grid can be utilized:

function initializeGrid(height, width) {
  const grid = document.getElementById('grid');
  while (grid.lastChild) grid.lastChild.remove();
  grid.style.gridTemplateColumns = `repeat(${width}, min-content)`;
  for (let h = 0; h < height; h++) {
    for (let w = 0; w < width; w++) {
      let button = document.createElement('button');
      button.setAttribute('class', 'cell');
      grid.appendChild(button)
    }
  }
}

initializeGrid(16,9);

.cell {
  margin: 0;
  background-color: rgb(31, 31, 31);
  padding: 10px;
  display: inline-block;
  border: none;
}

.cell:hover {
  background-color: rgb(73, 73, 73);
}

#grid {
  display: grid;
}

<div id="grid"></div>

Answer 4

To achieve this task, CSS grid can be utilized:

function initializeGrid(height, width) {
  const grid = document.getElementById('grid');
  while (grid.lastChild) grid.lastChild.remove();
  grid.style.gridTemplateColumns = `repeat(${width}, min-content)`;
  for (let h = 0; h < height; h++) {
    for (let w = 0; w < width; w++) {
      let button = document.createElement('button');
      button.setAttribute('class', 'cell');
      grid.appendChild(button)
    }
  }
}

initializeGrid(16,9);

.cell {
  margin: 0;
  background-color: rgb(31, 31, 31);
  padding: 10px;
  display: inline-block;
  border: none;
}

.cell:hover {
  background-color: rgb(73, 73, 73);
}

#grid {
  display: grid;
}

<div id="grid"></div>

What's the best way to arrange buttons in a vertical stack?

Answer №1

Answer №2

Similar questions

Determine if the input value is an integer using a custom validator in Angular 2

The dropdown button becomes unresponsive when attempting to navigate within it using ajax requests

Display or conceal 5 divs simultaneously

Can you provide guidance on configuring the image class within a DOM element using echo?

Top recommendations for integrating a customized form in Vue

Align the image in the center of the page horizontally

angularjs identifies the ng-click and href attributes within my event

Incorporating navigation controls into a modal window

Unable to Style Close Button in React-Bootstrap

Techniques for linking <span> values to the radar chart's field titles using AngularJS or JQuery

Troubleshooting the issue of CSS animations activating twice and causing a flickering effect specifically in the Firefox browser

Use ASP.NET MVC to pass data from an action to an AJAX call and utilize it in the success function

MUI React - Issue with changing SvgIcon color using override

Stop iframe zooming on Android devices

My code includes a function that uses setInterval to generate graphs

Closing the menu on image click in Ionic 2

Transmitting information exclusively to a targeted individual rather than broadcasting it to the entire channel

Are the Class Properties of React or Next.js Internally Managed and Maintained?

Change the data returned by Ajax

How to obtain the current URL of an iframe?