Skip to content

Instantly share code, notes, and snippets.

@loloof64
Created September 6, 2021 16:24
Show Gist options
  • Save loloof64/e038e02bf40f52964391624855020150 to your computer and use it in GitHub Desktop.
Save loloof64/e038e02bf40f52964391624855020150 to your computer and use it in GitHub Desktop.
CSS Course Udemy Grid #2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>Header</header>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</body>
</html>
html {
height: 100%;
}
body {
display: grid;
margin: 20px;
height: 100%;
grid-template-columns: [col-1-start] 1fr [col-1-end col-2-start] 3fr [col-2-end];
grid-template-rows: 4.5rem auto 4.5rem;
grid-template-areas: "header header" "side main" "footer footer";
}
header {
background: blue;
color: white;
grid-area: header;
}
main {
background: red;
color: white;
grid-area: main;
}
aside {
background: green;
color: white;
grid-column-start: col-1-start;
grid-area: side;
}
footer {
background: purple;
color: white;
grid-area: footer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment