Skip to content

Instantly share code, notes, and snippets.

Created February 16, 2018 02:32
Show Gist options
  • Save anonymous/b4d01c872801c5878e3d07e4abd5450e to your computer and use it in GitHub Desktop.
Save anonymous/b4d01c872801c5878e3d07e4abd5450e to your computer and use it in GitHub Desktop.
eVeWmw
<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>
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