I built a simple breakout layout using Rachel Andrew’s documentation https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/
I would like to adjust the layout so that the menu items are centered. To be more specific, I want the first menu item to align with the content, or in other words, for the menu area to have the same width as the content area. How can I accomplish this?
The breakout area of the navigation bar (left and right) will remain empty and is intended solely for its color.
:root {
font-size: 1em;
line-height: 1.5;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.header {
grid-area: header;
}
.nav {
grid-area: nav;
background: slateblue;
}
.menu {
padding: 0;
display: flex;
list-style: none;
& li + li {
margin-left: 1em;
}
& a {
color: #fff;
}
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
.grid-container {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"nav"
"main"
"footer";
}
@media (min-width: 52em) {
.grid-container {
grid-template-columns: minmax(1em, 1fr) minmax(300px, 800px) minmax(1em, 1fr);
/* justify-content: center; */
}
.grid-container > * {
grid-column: 2;
}
.grid-container > .full {
grid-column: 1/-1;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Layout</title>
</head>
<body>
<div class="grid-container">
<header class="header">
Header
</header>
<nav class="nav full">
<ul class="menu">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</nav>
<main class="main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deleniti velit odit, quasi culpa inventore ratione asperiores repellat adipisci enim, maxime iusto optio labore incidunt non natus delectus, soluta exercitationem!</p>
</main>
<footer class="footer">
Footer
</footer>
</div>
</body>
</html>The method I found is to add a container inside the nav, like so:
<nav class="nav full">
<div class="nav-container">
<ul class="menu">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</div>
</nav>
And do:
.nav-container {
max-width: 800px;
margin: 0 auto;
}
but this seems to be a dirty hack.
0
One of great things about this breakout technique is that you can nest grid-containers. In this case, you want the inside of the .full nav to have the same grid tracks as the parent grid container. All you need to do is add the grid-container class to <nav>:
<nav class="nav full grid-container">
If it’s helpful, Kevin Powell also has a nice, detailed explanation. of this breakout technique.
:root {
font-size: 1em;
line-height: 1.5;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.header {
grid-area: header;
}
.nav {
grid-area: nav;
background: slateblue;
}
.menu {
padding: 0;
display: flex;
list-style: none;
& li + li {
margin-left: 1em;
}
& a {
color: #fff;
}
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
.grid-container {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"nav"
"main"
"footer";
}
@media (min-width: 52em) {
.grid-container {
grid-template-columns: minmax(1em, 1fr) minmax(300px, 800px) minmax(1em, 1fr);
/* justify-content: center; */
}
.grid-container > * {
grid-column: 2;
}
.grid-container > .full {
grid-column: 1/-1;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Layout</title>
</head>
<body>
<div class="grid-container">
<header class="header">
Header
</header>
<nav class="nav full grid-container">
<ul class="menu">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</nav>
<main class="main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deleniti velit odit, quasi culpa inventore ratione asperiores repellat adipisci enim, maxime iusto optio labore incidunt non natus delectus, soluta exercitationem!</p>
</main>
<footer class="footer">
Footer
</footer>
</div>
</body>
</html>