I'm currently tackling a CSS grid project where I am aiming to have two divs within a container each occupy 50% of the width. However, I am facing some challenges in achieving this.
Within the nav element, I have two divs that I want to span across 50% of the container width each by utilizing the grid layout syntax. How would you go about implementing this?
Code:
$gutter: 30px;
$columns: 12;
$maxwidth: 1200px;
#container {
max-width: $maxwidth;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat($columns, 1fr);
grid-column-gap: $gutter;
grid-template-areas: "nav" "header" "main" "footer";
}
header, nav, main, footer {
grid-column: span $columns;
}
Markup:
<div id="container">
<nav>
<div></div>
<div></div>
</nav
<header></header>
<main></main>
<footer></footer>
</div>