CSS Grid layout doesn't make the layout behave the way I want, no matter what I do
Hi all I want to try this task and one of the requirements is that it uses grid layout in CSS so I just put together the beginning of the page to try and make the layout work the way I want and for me I can't get this page to work the way I need it to, and I'm at a loss, I can't figure out what I'm doing wrong or missing in this regard. I've looked at a lot of guides and sites on how to use grids, but I'm not sure what I'm missing. Thanks a lot for your help, here is my code. EDIT The layout I want is something like this.
HTML
<head>
<meta charset="UTF-8">
<title>Assignment 3</title>
<meta name="description" content="This is the assignment 3 web page showcasing what we have learned in COMP1223 the so far.">
<meta name="keywords" content="Assignment 3, HTML5, CSS, flexbox, grid, form, image mapping, position fixed, nav">
<meta name="author" content="Jessica">
<link href="grid.css" rel="stylesheet">
<link href="normalize.css" rel="stylesheet">
</head>
<body>
<div class="grid-container">
<div class="grid-item">
<aside class="hobbies">1</aside>
</div>
<div class="grid-item">
<header class="intro">2</header>
</div>
<div class="grid-item">
<section class="application">3</section>
</div>
<div class="grid-item">
<section class="form_elements">4</section>
</div>
<div class="grid-item">
<article class="tutorial">5</article>
</div>
<div class="grid-item">
<footer class="image_mapping">6</footer>
</div>
</div>
</body>
</html>
CSS
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: repeat(5 auto);
background-color: #2196F3;
padding: 10px;
grid-template-areas: "hb int int" "hb app fe" "hb app fe" "tu tu tu" "im im im";
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.hobbies {
grid-area: hb;
}
.intro {
grid-area: int;
}
.application {
grid-area: app;
}
.form_elements {
grid-area: fe;
}
.tutorial {
grid-area: tu;
}
.image_mapping {
grid-area: im;
}
The problem is that you are assigning grid areas to "aside", "header" and stuff, and you should assign the same grid area to the div that contains them.
One tip, if you're going to use "aside" and stuff, you shouldn't put them in a div, because divs and aside do the same thing, they group the content.
I'll leave how I would do that task, so maybe it will help you in the future:
.grid-container {
display: grid;
grid-template-areas:
"hb int int"
"hb ma ma"
"ar ar ar"
"im im im";
/*I give the rows and columns a size just for comfort, but you can use '1fr'*/
grid-template-rows: repeat(5, 100px);
grid-template-columns: repeat(3, 100px);
background-color: #2196F3;
padding: 10px;
}
.grid-item, .grid-main-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 15px;
font-size: 30px;
text-align: center;
}
/*I use id's to be more specific in wich thing i want to assign wich grid-area*/
#hobbies {
grid-area: hb;
}
#intro {
grid-area: int;
}
#tutorial {
grid-area: ar;
}
#image_mapping {
grid-area: im;
}
/* main container to have that 2 section's inside another block*/
#main-container {
grid-area: ma;
display: grid;
grid-template-areas:
"app frm"
"app frm";
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
/*you can put padding: 0; so the main container is invisible*/
}
#application {
grid-area: app;
}
#form_elements {
grid-area: frm;
}
<div class="grid-container">
<header class="grid-item" id="intro">2</header>
<aside class="grid-item" id="hobbies">1</aside>
<main class="grid-item" id="main-container">
<section class="grid-main-item" id="application">3</section>
<section class="grid-main-item" id="form_elements">4</section>
</main>
<article class="grid-item" id="tutorial">5</article>
<footer class="grid-item" id="image_mapping">6</footer>
</div>