In a project that I’m currently working on, I need to stack several buttons on top of each other. The way that I want to stack them is so that there is no gap in between them. This is what I currently have:
This is what I want:
Is there a way to do this in CSS?
The code that I am using is a function which takes in a height and a width and makes 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); }
Advertisement
Answer
Here you go.
I have adjusted your js to create rows of buttons and then those rows are added to container. Both rows and container have display: flex
.
You could ommit rows but it will be harder to create nice grid.
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>
other way will be to use grid
, but you will have to specify width of pixel and use it to create your container grid
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>