Created
May 5, 2021 13:01
-
-
Save exaucae/9f50aab2674a32d45ba199ffcd37d78b to your computer and use it in GitHub Desktop.
css grid layout template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<style> | |
.item1 { grid-area: header; } | |
.item2 { grid-area: sidebar; } | |
.item3 { grid-area: main; } | |
.item4 { grid-area: aside; } | |
.item5 { grid-area: footer; } | |
.grid-container { | |
display: grid; | |
grid: | |
'sidebar header header header header header' | |
'sidebar main main main aside aside' | |
'sidebar footer footer footer footer footer'; | |
grid-gap: 10px; | |
background-color: #2196F3; | |
padding: 10px; | |
} | |
.grid-container > div { | |
background-color: rgba(255, 255, 255, 0.8); | |
text-align: center; | |
padding: 20px 0; | |
font-size: 30px; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>A Webpage Template</h1> | |
<p>You can use the <em>grid-areas</em> property to name grid items.</p> | |
<p>You can refer to the name when you set up the grid layout, by using the <em>grid</em> property on the grid container.</p> | |
<p>This grid layout contains six columns and three rows:</p> | |
<div class="grid-container"> | |
<div class="item1">Header</div> | |
<div class="item2">Sidebar</div> | |
<div class="item3">Main</div> | |
<div class="item4">Aside</div> | |
<div class="item5">Footer</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment