Центр текста в столбце / по вертикали, CSS Grid

Question

У меня есть простая сетка (https://jsfiddle.net/3f5oLjxu/1/),, как я могу сделать так, чтобы ссылки на левой стороне сетки центрировались вертикально, а не располагались наверху. Css:

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  margin: 0px 12%;
}

.grid>* {
  border: 1px solid lightgray;
  padding: 15px;
}

<div class="grid">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Interior Painting</a></li>
      <li><a href="#">Exterior Painting</a></li>
      <li><a href="#">Deck Painting</a></li>
      <li><a href="#">Power Wash</a></li>
      <li><a href="#">Wallpaper Remvoal</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <section>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dignissimos error expedita debitis, eligendi a, dolorum velit, doloremque est repellat perferendis consectetur non similique mollitia maiores officiis totam voluptatibus libero.Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Distinctio non provident sunt, voluptatem omnis. Porro nisi architecto expedita quae odit distinctio sint illo, tempora possimus dolore at, reprehenderit corrupti voluptatibus.
  </section>
</div>
<!-- close grid -->

Я пробовал всевозможные комбинации justify-content, justify-items, align-self, margin: auto;, превращая nav в flex предмет, ul в flex предмет и т.д. ... Заранее благодарим за любую помощь.

Answer 1

Вы можете сделать это, используя flexbox : https://yoksel.github.io/flex-cheatsheet/

Это простой в освоении и очень распространенный инструмент на современных веб-сайтах.

1. Создайте .grid a flex элемент с flex-basis: 100%; и flex-flow: row nowrap;

2. Создайте .nav гибкий контейнер и выровняйте его элементы по центру с align-items: center;

ИЛИ, если вы просто хотите использовать flex на элементе nav и нигде больше, выполнение

nav{
display: flex;
align-items: center;
}

будет вполне достаточным, если вы не хотитевесь ваш макет имеет flexy манеру

.grid {
display: flex;
flex-flow: row nowrap;
flex-basis: 100%;
margin: 0px 12%;
}

.nav{
display: flex;
align-items: center;
}

.grid>* {
  border: 1px solid lightgray;
  padding: 15px;
}

<div class="grid">
<div class="nav">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Interior Painting</a></li>
      <li><a href="#">Exterior Painting</a></li>
      <li><a href="#">Deck Painting</a></li>
      <li><a href="#">Power Wash</a></li>
      <li><a href="#">Wallpaper Remvoal</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>
  
  <section>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dignissimos error expedita debitis, eligendi a, dolorum velit, doloremque est repellat perferendis consectetur non similique mollitia maiores officiis totam voluptatibus libero.Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Distinctio non provident sunt, voluptatem omnis. Porro nisi architecto expedita quae odit distinctio sint illo, tempora possimus dolore at, reprehenderit corrupti voluptatibus.
    dignissimos error expedita debitis, eligendi a, dolorum velit, doloremque est repellat perferendis consectetur non similique mollitia maiores officiis totam voluptatibus libero.Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Distinctio non provident sunt, voluptatem omnis. Porro nisi architecto expedita quae odit distinctio sint illo, tempora possimus dolore at, reprehenderit corrupti voluptatibus.
  </section>
</div>
<!-- close grid -->

Answer 2

Вы можете использовать модуль макета flexbox.Похоже, вы были на трассе с самого начала.Просто прикрепите это к стилю nav.

nav {
    display: flex;
    alignt-items: center;
}

Answer 3

Чтобы изменить положение дочернего элемента сетки, вы можете использовать свойство * -self. Vertical будет вашим доступом к столбцу, используйте nav {align-self: center;} для вертикального центрирования навигации в этом сценарии.