Created
February 16, 2018 02:32
-
-
Save anonymous/b4d01c872801c5878e3d07e4abd5450e to your computer and use it in GitHub Desktop.
eVeWmw
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
<div class="wrapper"> | |
<header class="header"> | |
<div class="logo"> | |
Iadasd | |
</div> | |
<div class="name"> | |
DeleteMyData | |
</div> | |
</header> | |
<aside class="sidebar-left"> | |
Left Sidebar | |
</aside> | |
<main> | |
Main | |
</main> | |
<aside class="sidebar-right"> | |
Right Sidebar | |
</aside> | |
</div> |
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
header { | |
grid-area: header; | |
} | |
.name { | |
grid-area: name; | |
} | |
.logo { | |
grid-area: logo; | |
} | |
aside { | |
grid-area: side; | |
} | |
.wrapper > * { | |
border: 2px solid rgb(233,171,88); | |
border-radius: 5px; | |
background-color: rgba(233,171,88,.5); | |
color: #d9480f; | |
} | |
.wrapper { | |
display: grid; | |
grid-template-columns: repeat(3, 1fr); | |
grid-gap: 10px; | |
grid-auto-rows: minmax(50px, auto); | |
width: 75%; | |
margin: 0 auto; | |
} | |
header { | |
grid-column: 1 / 4; | |
grid-row: 1; | |
display: grid; | |
grid-template-columns: [logo] 50px [name] 100px; | |
padding: 1em; | |
} | |
@media only screen and (max-width: 740px) { | |
header { | |
grid-row: 1; | |
grid-column: 2; | |
justify-self: center; | |
} | |
} | |
.sidebar-left { | |
/* Start on Row 2 */ | |
grid-row: 2; | |
/* Start on the first column line and stop at the next column line */ | |
grid-column: 1 / 2; | |
} | |
main { | |
/* Start on Row 2 */ | |
grid-row: 2 / 20; | |
/* Start on the second column line and stop at the third column line */ | |
grid-column: 2 / 3; | |
} | |
.sidebar-right { | |
/* Start on Row 2 */ | |
grid-row: 2; | |
/* Start on the third column line and stop at the last column line */ | |
grid-column: 3 / 4; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment