Center text in column/vertically, CSS Grid - css

Question

I have a simple grid (https://jsfiddle.net/3f5oLjxu/1/), how can I get the links on the left side of the grid to center vertically, instead of being positioned at the top.
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>Home</li>
<li>Interior Painting</li>
<li>Exterior Painting</li>
<li>Deck Painting</li>
<li>Power Wash</li>
<li>Wallpaper Remvoal</li>
<li>Contact</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 -->
I have tried all sorts of combinations of justify-content, justify-items, align-self, margin: auto;, turning the nav into a flex item, the ul into a flex item, etc... Thanks in advance for any help.

Answer 1

You could do this using flexbox:
https://yoksel.github.io/flex-cheatsheet/
It is easy to learn and is very common tool in nowadays websites.
Make .grid a flex item with flex-basis: 100%; and flex-flow: row nowrap;
Make .nav a flex container, and align it's items in the center with align-items: center;
OR if you just want to use flex on your nav element and nowhere else, doing
nav{
display: flex;
align-items: center;
}
would be totally sufficient, If you don't want your whole layout to have a flexy manner
.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>Home</li>
<li>Interior Painting</li>
<li>Exterior Painting</li>
<li>Deck Painting</li>
<li>Power Wash</li>
<li>Wallpaper Remvoal</li>
<li>Contact</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

To change the position of a child of a grid, you can use the *-self property. Vertical will be your column access, use nav {align-self: center;} to vertically center the nav in this scenario.

Answer 3

You can use the flexbox layout module. It seems like you were on the track there to begin with. Just attach this to the nav style.
nav {
display: flex;
alignt-items: center;
}