How to format button placement?

user_9147074 0
Viewed 238

I'm learning to make chrome extensions and I have added buttons and styled them with CSS. How do I make three columns and two rows of buttons?

I've tried changing the styling and playing with 'position' in CSS but I can't find anything on the internet. 

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
<a href="https://google.co.uk" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>

I am trying to get rows and columns of these buttons instead of just one row of all these buttons.

google-chrome-extension css html
1 Answers

A perfect layout for this would be using a CSS Grid Layout. And to style, use CSS Flex Layout.

The reason why we choose CSS Grid, is because there is a neat grid-template-columns which track the sizing of the columns, here we tell it the number of columns (3) and the track size. A great guide to Grid Layout https://css-tricks.com/snippets/css/complete-guide-grid/

The reason why we choose CSS Flex for styling, you want the button to be positioned in the center. Since we placed a min-max of the row height previously. BUT you don't have to use Flex Layout, you could use Grid Layout and add place-self: center; instead. But that means you have to control the size yourself.

Basically you just do the following:

Run the code snippet below:

body {
  font-family: sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(50px, auto);
}

.button {
  border: 1px solid transparent;
  border-radius: 3px;
  border-color: #0095ff;
  box-shadow: 0 0 0 0 rgba(0,149,255,0);
  color: #07C;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.button:hover {
  background-color: rgba(0,119,204,0.05);
  color: #005999;
}
<div class="grid">
<a href="#" class="button">Button1</a>
<a href="#" class="button">Button2</a>
<a href="#" class="button">Button3</a>
<a href="#" class="button">Button4</a>
<a href="#" class="button">Button5</a>
<a href="#" class="button">Button6</a> 
</div>

user_1305150
Related