I’m trying to build a simple grid layout aa/bc/dd and can’t figure out what’s wrong, kinda running out of ideas…
.container {
display: grid;
grid-template-areas: 'head head' 'nav main' 'foot foot';
gap: 10px;
}
.content {
background-color: red;
}
.1 {
grid-area: head;
}
.2 {
grid-area: nav;
}
.3 {
grid-area: main;
}
.4 {
grid-area: foot;
}<main>
<div class="container">
<div class="content 1">header</div>
<div class="content 2">nav</div>
<div class="content 3">aside</div>
<div class="content 4">footer</div>
</div>
</main>All it does is place my elements in an head nav/main foot 2:2 grid, for some reason head never extends to fill out the first row.
In the end I just got code from a different source and adapted it, but I want to learn from what I did wrong in my own code.
0
You made a big mistake. Class names in CSS cannot be numbers. You must use string for class name.
I provde updated code.
<html>
<head>
<style>
.container {
display: grid;
grid-template-areas:
'head head'
'nav main'
'foot foot';
gap: 10px;
}
.content {
background-color: red;
padding: 10px;
}
.header {
grid-area: head;
}
.nav {
grid-area: nav;
}
.main {
grid-area: main;
}
.footer {
grid-area: foot;
}
</style>
</head>
<body>
<main>
<div class="container">
<div class="content header">header</div>
<div class="content nav">nav</div>
<div class="content main">aside</div>
<div class="content footer">footer</div>
</div>
</main>
</body>
</html>
0