# Lesson 5: Creating Responsive Layouts

## Media Queries <a href="#media-queries" id="media-queries"></a>

決定螢幕尺寸的方式，通常是以width為準。

**viewport** - the area of the window in which web content can be seen. We use the dimensions of the viewport (usually the width, but sometimes the height) as the basis of our media queries.

### For more information about `viewport` see

* [What is a viewport?](https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts#What_is_a_viewport)
* [Using the viewport meta tag to control layout on mobile browsers](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)

## Adding Media Queries in Code <a href="#adding-media-queries-in-code" id="adding-media-queries-in-code"></a>

```css
@media(feature:value)
```

```css
@media(min-width:900px) {
  body{
   background:red;
 }
}
```

{% hint style="warning" %}
講師的經驗是：從最小尺寸開始設計。Mobile -> Desktop
{% endhint %}

### Multiple Breakpoints

三種大小的設定方式

```css
/* Anything smaller than first breakpoint 600px */
.container {
  // rules for small screen
}

/* Medium Screens */
@media (min-width: 600px) and (max-width:900px) {
  .container {
    // rules for medium-sized screen
  }
}

/* Large Screens */
@media (min-width:901px) {
  .container {
    // rules for large screen
  }
}
```

```css
/* Mobile first */
.container{
  display:grid;
  grid-template-columns: 300px 300px 300px;
  grid-template-rows: 250px 600px;
  border: 2px solid yellow;
    /* Use grid-template-area to create a mobile layout where each named space occupies its own row */
  grid-template-areas: 
      "hd hd hd "
      "sd sd sd"
      "main main main"
      "ft ft ft";
}
.box{
    border: 1px solid red;
    background: #F8FA9D;
    }

  .header{
    grid-area:hd;
  }
  .footer{
    grid-area: ft;  
  }
  .sidebar{
    grid-area: sd;
  }
  .content{
    grid-area: main;
  }

/* If Screen Is Wide Enough */
@media(min-width:900px){
.container{
      display:grid;
      grid-template-columns: 300px 300px 300px;
      grid-template-rows: 250px 600px;
      grid-template-areas: 
      "hd hd hd hd hd hd hd hd"
      "sd sd main main main main main main"
      "ft ft ft ft ft ft ft ft";
      border: 2px solid red;
  }
}
```

### Further Research

Media Queries are actually a vast landscape of possibility, most of which you will probably never use - but, having a strong grasp of media queries and responsive breakpoints is essential for a web developer. For more information see the [MDN docs entry on using Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries).

## Nesting Grids

Nesting CSS grids is simple and can be done simply by using the `display:grid` rule for both a parent and child element.

```css
.container {
  display:grid;
  // ...
}

#one {
  display:grid
}
```

Example

```markup
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Exercise 1</title>
    <meta
      content="width=device-width, initial-scale=1, maximum-scale=1"
      name="viewport"
    />
    <link rel="stylesheet" href="css/style-solution.css">
  </head>

  <body>
  <div class = "container">
    <div class="header box">Header</div>
    <div class="sidebar box"><h1>Blog Posts</h1><a href="post.html">Most Recent Post</a></div>
    <div class="content box">
<!-- nest grid here -->
      <div class="nestedGrid">
        <div><h1>Thursday</h1></div>
        <div><h1>Fall</h1></div>
        <div><h1>Fritz</h1></div>
        <div><h1>Dairy Free</h1></div>
      </div>
    </div>
    <div class="footer box">Footer</div>
  </div>
  </body>
</html>
```

```css
.container{
  display:grid;
  grid-template-columns: 300px 300px 300px;
  grid-template-rows: 250px 600px;
  /* grid-template-columns: repeat(3, 1fr); */
  /* Initially each element has its own row for small screens */
  grid-template-areas: 
  "hd"
  "sd"
  "main"
  "ft";
  border: 2px solid yellow;
}
/* add css for nested grid here */
.nestedGrid{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
}
.nestedGrid > *{
  border: 2px solid aquamarine;
}
.box{
    border: 1px solid red;
    background: #F8FA9D;
    }
  .header{
    /* row start/column start/ row end/ column end */
    grid-area:hd;
  }
  .footer{
    grid-area: ft;  
  }
  .sidebar{
    grid-area: sd;
  }
  .content{
    grid-area: main;
  }
/* If Screen Is Wide Enough */
@media(min-width:900px) {
.container{
      display:grid;
      grid-template-columns: 300px 300px 300px;
      grid-template-rows: 250px 600px;
      grid-template-areas: 
      "hd hd hd hd hd hd hd hd"
      "sd sd main main main main main main"
      "ft ft ft ft ft ft ft ft";
      border: 2px solid red;
  }
}
```





