CSS сетка не выравнивается по оси Y

Question

Это небольшая проблема, но я не понимаю. Я просто пытаюсь выровнять текст по оси y, но он только немного отодвигается, когда я ставлю align-self: end или center. Контейнер - это основная сетка, которая содержит col div (столбцы), который содержит con div (content), который содержит текст внутри поля div

CSS

.container{

  display: grid;
  grid-template-columns: repeat(4,22.45em);
  grid-template-rows: 48rem;
  grid-template-areas:
  "colone coltwo colthr colfour";
  /*text-align: center;*/

}
.con{
  /*
  padding-left: 0.5rem auto;
  padding-right: 0.5rem auto;
  padding-top: 0.5rem auto;
  padding-bottom: 0.5rem auto;*/
  display: grid;
  grid-area: con;

  justify-content: center;
  align-items: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;

  position: relative;
}
.col{
  border-right: 0.005rem solid white;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 16rem;
  grid-template-areas: "con";
  color: grey;
  z-index: 1;
}
.box{
  position: absolute;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  justify-self: start;
  align-self: end;
}

вот ссылка на кодовый блок: https://codepen.io/aronnora/project/editor/DkyrVM

Answer 1

Добро пожаловать в StackOverflow.

Итак, я прошел ваш CSS. Я проверил элементы и обнаружил, что дочерний элемент с классом .con имеет высоту по умолчанию и также не наследует высоту родителя, потому что вы не установили высоту для родителя, что не является необходимым, поскольку вы используете grid-template-rows: 48em.

Поэтому я бы предложил вам установить высоту .con, например,

.con {
  height: 48em;
}

Надеюсь, это решит ваш запрос.

Answer 2

Возможно, вам потребуется поместить содержимое в собственный контейнер, а затем присвоить ему некоторые собственные свойства

.center-Container {
  display: flex;
  justify-content: center;
  align-items: center;
}

или упростить способ добавления padding-top: 40%; к существующему содержимому * 1005. *