Как отформатировать размещение кнопок?

Question

Я учусь делать расширения для Chrome, и я добавил кнопки и стилизовал их с помощью CSS. Как сделать три столбца и два ряда кнопок?

Я пытался изменить стиль и поиграть с 'position' в CSS, но я ничего не могу найти в интернете.

.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> 

Я пытаюсь получить строки и столбцы этих кнопок вместо одной строки всех этих кнопок.

Answer 1

Для этого идеально подойдет CSS Grid Layout . А для стиля используйте CSS Flex Layout .

Причина, по которой мы выбираем CSS Grid, заключается в том, что есть аккуратные grid-template-columns , которые отслеживают размер столбцов, здесь мы сообщаем ему количество столбцов (3) и дорожку размер. Отличное руководство по разметке сетки https://css -tricks.com / snippets / css / complete-guide-grid /

Причина, по которой мы выбираем CSS Flex для стилизации, заключается в том, что кнопка должна располагаться в центре. Так как мы поместили мин-макс высоты строки ранее. НО вам не нужно использовать Flex Layout, вы можете использовать Grid Layout и добавить вместо него place-self: center;. Но это означает, что вы должны сами контролировать размер.

В основном вы просто делаете следующее:

• Только сетка: https://codepen.io/mohamedhmansour/pen/XooJEx
• Сетка и гибкий макет: https://codepen.io/mohamedhmansour/pen/gZZbGP

Запустите фрагмент кода ниже:

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>