eVeWmw

evewmw.markdown

eVeWmw

A Pen by Praveen on CodePen.

License.

index.html

<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>

style.css

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;
}