I am currently facing an issue with my code where I am attempting to set up a wrapper element as a grid. However, upon inspecting the page, I am receiving notifications that my inputs for display, grid-template-columns, and grid-template-area are considered invalid. This situation has left me puzzled; is there anyone who can review this and provide some insight?
Here's the HTML section:
<!DOCTYPE html>
<html lang="en">
...
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
...
Below is my CSS related to the wrapper element:
#wrapper {
width: 100vw;
height: 100vh;
background-color: rgb(194, 194, 214);
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-areas: "header header header"
"nav nav nav"
"aside-1 article aside-2"
"aside-3 article-2 aside-4"
"footer footer footer";
align-items: stretch;
justify-content: center;
}