tod
/
odin-css-grid-practice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Completed exercise 01 

Note: used "fr"s instead of px, and areas instead of spanning
This commit is contained in:
NetMan 2024-01-25 23:26:07 +01:00
parent d8b4722e40
commit 1e3b2721c8
2 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
01-grid-layout-1/style.css
View File

@ -9,6 +9,14 @@ html {
height: 100%; height: 100%;
padding: 16px; padding: 16px;
box-sizing: border-box; box-sizing: border-box;
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr 1fr 5fr 1fr;
grid-template-areas: "header header"
"sidebar nav"
"sidebar article"
"footer footer";
gap: 15px;
} }
.container div { .container div {
@ -22,21 +30,26 @@ html {
.header { .header {
background-color: #006157; background-color: #006157;
grid-area: header;
} }
.sidebar { .sidebar {
grid-area: sidebar;
background-color: #005B94; background-color: #005B94;
} }
.nav { .nav {
grid-area: nav;
background-color: #642cde; background-color: #642cde;
} }
.article { .article {
grid-area: article;
background-color: #7E1DC3; background-color: #7E1DC3;
} }
.footer { .footer {
grid-area: footer;
background-color: #393f4d; background-color: #393f4d;
} }