Unable to align buttons with CSS flex or grid

user_15145933 0
Viewed 517

I'm trying to create a page where I have 2 lists of buttons, each one in a div, side by side. I tried a CSS grid and flex, as you can see below. However, nothing seems to work, as the first div went all the way to the left margin and the other one under it.

How do I add some space to the left margin for the first column and from the half of the page for the second one?

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

button {
  width: 120px;
  height: 60px;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font color: black;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: white;
  color: black;
  border: 2px solid #CC0000;
}
<div class="grid-container">
  <div class="grid-child">

    <a href="createCl.php"> <button style="color: #000000; text-decoration: none;">
            <strong>Aggiungi</strong></button></a>Aggiungi</span> <br><br>
  </div>

  <div class="grid-child">

    <a href="map.php"> <button style="color: #000000; text-decoration: none;">
            <strong>Mappa</strong></button></a>Mappa Clienti</span>
  </div>
</div><br>

css html
2 Answers

I'm a big fan of using flex. So if you're not locked in on using grid, here's a solution:

https://codepen.io/oppo_oskar/pen/yLVJQeL HTML:

<div class="grid-container">
  <div class="left buttons">
    <button>Left1</button>
    <button>Left2</button>
    <button>Left3</button>
    <button>Left4</button>
   </div>
    <div class="right buttons">
      <button>Right1</button>
      <button>Right2</button>
      <button>Right3</button>
      <button>Right4</button>
    </div>
</div>

CSS:

.grid-container
{
  display: flex;
  flex-direction: row;
}

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

For quick reading on how flex works, you can check out this site: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

user_80265660

All your buttons must be inside a container, for example: <div class="grid-container">.

In CSS, grid-template-columns: ; defines how many columns you will have in your .grid-container.

For every 1fr that you type into grid-template-columns: ; a new column will be created.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  }
<div class="grid-container">
    <button>Button1</button>
    <button>Button2</button>
    <button>Button3</button>
    <button>Button4</button>
    <button>Button5</button>
    <button>Button6</button>
</div>

I hope it helped a bit, please let me know. ^^'

user_151688710
Related