1.3: Layouts

Creating site layout using what you have learned!

Flexbox

Adjust your code to reflect the following:

<div class=wrapper>
  <header class="header">Header</header>
      <article>
          <div class="main">
              <div class="child"></div>
          </div>
      </article>
    <aside class="aside aside-1">1<aside>
    <aside class="aside aside-2">2<aside>
  <footer class="footer">Footer</footer>
</div>

body{
  background: #fff;
  color: #fff;
  font-size: 250%;
  text-align: center;
  padding: 2em;
}
.wrapper * {
  flex: 1 100%;
}
.header {
  border-bottom: 3px solid white;
  background: #2c3e50;
}
.footer {
  border-top: 3px solid white;
  background:#061539;
}
.child{
  width: 100px;
  height: 100px;
  border-left: 2px solid white;
  border-right: 2px solid white;
  margin: auto;
  background: #7887ab;
}
.main {
  background: #2e4272;
}
.aside-1{
  border-top: 3px solid white;
  background: #162955;
}
.aside-2 {
  border-top: 3px solid white;
  background: #4f628e;
}

Grid

• Properties: grid-area, grid-gap, grid-template-columns, grid-template-rows, grid-template-areas

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content
    <br /></div>
  <div class="box footer">Footer</div>
</div>

body {
  margin: 40px;
}
.sidebar {
        grid-area: sidebar;
    }
    .content {
        grid-area: content;
    }
    .header {
        grid-area: header;
    }
    .footer {
        grid-area: footer;
    }
    .wrapper {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 120px 120px 120px;
        grid-template-areas:
        "....... header header"
        "sidebar content content"
        "footer  footer ......";
        background-color: rgba(0,128,128,0.2);
        border: 2px solid rgb(0,128,128);
        border-radius: 5px;
        color: #fff;
    }
.box {
  background-color: rgba(0,128,128,0.7);
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
}
.header,
.footer {
  background-color: rgb(0,128,128);
}

Explore More

Implicit & Explicit grids

flex-shrink, flex-grow, flex-basis

nested grids

auto templates

Challenges

Gold: Create the same layout using grid line numbers

Blue: Create the same layout using grid named lines

Red: Create a layout using both flexbox and grid