rework grid to use template-area
This commit is contained in:
parent
2afc5cd36b
commit
e65d24700c
1 changed files with 8 additions and 8 deletions
|
@ -1,11 +1,10 @@
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
/*display: flex;
|
|
||||||
flex-direction: column;*/
|
|
||||||
display: grid;
|
display: grid;
|
||||||
min-height: 100vh;
|
grid-template-areas:
|
||||||
/*grid-template-rows: auto 1fr auto;*/
|
"header header"
|
||||||
grid-template-columns: 0.2fr 1fr;
|
"menu main"
|
||||||
|
"footer footer";
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
@ -14,7 +13,7 @@ header {
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
margin-left: 3em;
|
margin-left: 3em;
|
||||||
margin-right: 3em;
|
margin-right: 3em;
|
||||||
grid-column: 1 / 3;
|
grid-area: header;
|
||||||
}
|
}
|
||||||
|
|
||||||
header a {
|
header a {
|
||||||
|
@ -59,7 +58,7 @@ header h2 {
|
||||||
margin: 2em 0 2em 3em;
|
margin: 2em 0 2em 3em;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
grid-column: 1;
|
grid-area: menu;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header-links a {
|
#header-links a {
|
||||||
|
@ -74,13 +73,14 @@ header h2 {
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
margin: 2em 3em 5em 1em;
|
margin: 2em 3em 5em 1em;
|
||||||
|
grid-area: main;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
background-color: #304B99;
|
background-color: #304B99;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
grid-column: 1/4;
|
grid-area: footer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#buttons {
|
#buttons {
|
||||||
|
|
Loading…
Reference in a new issue