Как сделать вертикальное выравнивание элементов внутри full-height css grid по центру?

Question

разбираюсь с css grid. Набросал небольшой макет, тренируюсь... Мне нужно получить полностью адаптивную двух-колоночную сетку на всю высоту! При этом, что бы для мобильных устройств сетка менялась с двух-колоночной на двух-строчную и так же оставалась ровно по полам и на всю высоту! Вроде бы что то вышло, но не могу выровнять контент внутри этих grid-item, в данном случае текст нужно выровнять по вертикали, нашел решение, но оно не совсем подходит: justify-items: center;align-items: center; Если присвоить колонкам эти свойства, они становятся ровно по центру, но теряют свои full-width и full-height свойства... Как этого избежать?

Answer 1

Можно затемняющий фон сразу на картинку в ссылке повесить, а не на span. Соответственно не будет необходимости span делать 100% по высоте. Таким образом можно его выравнять внутри ссылки безо всяких line-height;

@import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');
body {
  margin: 0 auto;
  font-family: "Marck Script", cursive;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0px;
  grid-auto-rows: auto;
  grid-auto-columns: auto;
  height: 100vh;
}
.wrapper a {
  text-decoration: none;
  color: #fff;
  font-size: 10vh;
  text-align: center;
  background-size: cover;
  transition: .5s linear;  
}

.wrapper a:hover {box-shadow: inset rgba(0,0,0,.75) 0 0 100px 100px}
.one {
  grid-column: 1 / 2;
  background-image:  linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F44%2F2019%2F10%2F30%2F7218335.jpg);
  background-position: center;
}

.two { 
  grid-column: 2 / 2;
  background-image:  linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(https://image.freepik.com/free-photo/top-view-fresh-red-strawberries-with-tea-olives-dark-floor-fruit-berry-fresh_140725-82440.jpg);
 background-position: center;
}

@media screen and (max-width: 600px) {
  .wrapper {
    grid-template-columns: 100%;
    grid-template-rows: 50%;
    grid-gap: 0px;
    height: 100vh;
  }
  .wrapper a {
    grid-column: auto;
    display: grid;
    place-items: center;
  }
  .one {grid-row: 1 / 2;}
  .two {grid-row: 2 / 2;}
}

<div class="wrapper">
  <a href="#" class="one"><span>Ресторан здорового питания</span></a>
  <a href="#" class="two"><span>ЭКО-Магазин</span></a>
</div>

БЛОГ НА HUSL

Как сделать вертикальное выравнивание элементов внутри full-height css grid по центру?

Ответы (1 шт):