Как задать ссылкам в виде кнопок единый размер независимо от текста в css?

Question

[dsntmttr]

<style type="text/css">
.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  width: 150px;
  height: 100px;
}

body {background: #d6eaf8}
a.bttn {
  text-decoration: none;
  outline: none;
  display: inline-block;
  color: white;
  padding: 20px 30px;
  margin: 10px 20px;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  background-image: linear-gradient(to right, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%);
  background-size: 200% auto;
  box-shadow: 0 0 20px rgba(0,0,0,.1);
  transition: .5s;
}
a:hover {background-position: right center;}
</style>
<div class="wrapper">
	<div><a class="bttn" href="http://dveri-familiya.ru/%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3/%D1%81%D0%B5%D1%80%D0%B8%D1%8F-%D0%B0/">Царговые двери</a></div>
	<div><a href="http://dveri-familiya.ru/%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3/%D0%BA%D0%BE%D0%BB%D0%BB%D0%B5%D0%BA%D1%86%D0%B8%D1%8F-%D1%81%D1%82%D0%B8%D0%BB%D1%8C/" class="bttn">Стиль</a></div>
	<div><a href="http://dveri-familiya.ru/%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3/%D0%BA%D0%BE%D0%BB%D0%BB%D0%B5%D0%BA%D1%86%D0%B8%D1%8F-%D0%B3%D0%B5%D0%BE%D0%BC%D0%B5%D1%82%D1%80%D0%B8%D1%8F/" class="bttn">Геометрия</a></div>
	<div><a href="http://dveri-familiya.ru/%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3/%D0%BA%D0%BE%D0%BB%D0%BB%D0%B5%D0%BA%D1%86%D0%B8%D1%8F-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B8%D0%BA%D0%B0/" class="bttn">Классика</a></div>
	<div><a href="http://dveri-familiya.ru/%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3/%D0%BA%D0%BE%D0%BB%D0%BB%D0%B5%D0%BA%D1%86%D0%B8%D1%8F-%D1%81%D0%B8%D1%80%D0%B8%D1%83%D1%81/" class="bttn">Сириус</a></div>
	<div><a href="http://dveri-familiya.ru/%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3/%D0%BA%D0%BE%D0%BB%D0%BB%D0%B5%D0%BA%D1%86%D0%B8%D1%8F-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8C/" class="bttn">Модуль</a></div>
	<div><a href="http://dveri-familiya.ru/%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3/%D0%BA%D0%BE%D0%BB%D0%BB%D0%B5%D0%BA%D1%86%D0%B8%D1%8F-%D0%BA%D0%BE%D0%BD%D1%81%D1%83%D0%BB/" class="bttn">Консул</a></div>
</div>

Answer 1

[Ankhena]

Либо задать ссылкам display:block
Либо убрать оборачивающие их div (ибо не нужны).
Если хочется во что-то их оборачивать, то уж в список тогда.

Высоту задавать через grid-auto-rows: 1fr; у строк грида.

И разобраться с высотой и шириной для .wrapper, а то у вас там заведомая лажа написана.