> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/javascript-152-advancedcss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/javascript-152-advancedcss/part-1-flexbox-and-grids/1.3-layouts.md).

# 1.3: Layouts

Creating site layout using what you have learned!

## Flexbox

Adjust your code to reflect the following:

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

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

![](https://github.com/eleven-fifty-academy/javascript-152-advancedcss/tree/6fc6d0cae9728bd26b865b4fea275022abac72da/docs/0.1%20flexbox_grids/FBassets/FB_layout.png)

## Grid

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

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

```css
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);
}
```

![](https://github.com/eleven-fifty-academy/javascript-152-advancedcss/tree/6fc6d0cae9728bd26b865b4fea275022abac72da/docs/0.1%20flexbox_grids/FBassets/grid_layout.PNG)

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