I'm struggling with setting up grids. I have defined the boundaries and everything seems to fall into place within the grid, except for my aside element that I want to appear on the right side of the screen. Interestingly, this issue arises when using SASS. Upon inspecting the grid area using the browser's inspector tool, it does recognize the grid area for my aside.
Despite wanting the aside element to be positioned to the side of the screen, it keeps getting pushed below the "main" part of the grid. HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<title>MR Blog</title>
</head>
<body>
<section id="layout">
<section id="main-nav">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</section>
<main>
<section id="blog">
<h1>Max's Blog</h1>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna etiam tempor orci eu lobortis. In hac habitasse platea dictumst quisque sagittis purus sit. Viverra vitae congue eu consequat ac. Nec ultrices dui sapien eget. Tortor at auctor urna nunc id cursus metus aliquam eleifend. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Integer malesuada nunc vel risus. Dolor magna eget est lorem. At quis risus sed vulputate. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Odio pellentesque diam volutpat commodo sed egestas. Enim diam vulputate...
<p>Viverra tellus in hac habitasse platea. Pharetra vel turpis nunc eget lorem dolor. Nulla facilisi etiam dignissim diam quis enim. Turpis in eu mi bibendum neque egestas congue. Urna porttitor rhoncus dolor purus non enim praesent elementum. Dolor purus non enim praesent. A lacus vestibulum sed arcu. Viverra maecenas accumsan lacus vel. Ipsum a arcu cursus vitae congue mauris rhoncus aenean. Blandit turpis cursus in hac habitasse platea dictumst quisque. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Quis blandit turpis cursus in hac habitasse platea dictumst. Id diam maecenas ultricies mi eget mauris pharetra et. Sit amet consectetur adipiscing elit ut. Dignissim convallis aenean et tortor at risus viverra adipiscing at.</p>
</section>
<section class="social">
<aside>
<h3>Find Me Here!</h3>
<p><a href="#">Twitter</a></p>
<p><a href="#">Facebook</a></p>
<p><a href="#">Instagram</a></p>
</aside>
</section>
</main>
<footer><p>© Max Reitmayer 2023</p></footer>
</section>
</body>
</html>
CSS:
#layout {
display: -ms-grid;
display: grid;
-ms-grid-rows: 5em 1fr auto;
grid-template-rows: 5em 1fr auto;
-ms-grid-columns: minmax(25em, 1fr) 16em;
grid-template-columns: minmax(25em, 1fr) 16em;
grid-template-areas: " nav nav" " main aside" " footer footer";
}
#main-nav {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-area: nav;
background-color: green;
}
#blog {
-ms-grid-row: 2;
-ms-grid-column: 1;
grid-area: main;
background-color: purple;
}
footer {
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-area: footer;
background-color: red;
}
#social {
-ms-grid-row: 2;
-ms-grid-column: 2;
grid-area: aside;
background-color: orange;
padding: 1em;
padding-left: 45px;
}
#mav-nav {
background: #242469;
font-color: #D1B53B;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
* {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
SCSS of my layout:
#layout {
display: grid;
grid-template-rows:5em 1fr auto;
grid-template-columns: minmax(25em, 1fr) 16em;
grid-template-areas:
" nav nav"
" main aside"
" footer footer";
}
#main-nav {
grid-area: nav;
background-color: green;
}
#blog {
grid-area: main;
background-color: purple;
}
footer {
grid-area: footer;
background-color: red;
}
#social {
grid-area: aside;
background-color: orange;
padding: 1em;
padding-left: 45px;
}