Lesson 5: Creating Responsive Layouts

Media Queries

決定螢幕尺寸的方式，通常是以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

Adding Media Queries in Code

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

講師的經驗是：從最小尺寸開始設計。Mobile -> Desktop

Multiple Breakpoints

三種大小的設定方式

/* 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
  }
}
/* 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.

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.

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

#one {
  display:grid
}

Example

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

PreviousLesson 4: CSS GridNextHow to use Adobe Design tokens - Spectrum

Last updated