Create Responsive Layouts

Tell us what’s happening:
I’m trying to shrink the advert column so that the header and footer will fill the window respectively.

Your code so far

  .item1 {
    background: LightSkyBlue;
    grid-area: header;
  .item2 {
    background: LightSalmon;
    grid-area: advert;
  .item3 {
    background: PaleTurquoise;
    grid-area: content;
  .item4 {
    background: lightpink;
    grid-area: footer;
  .container {
    font-size: 1.5em;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px auto 1fr auto;
    grid-gap: 10px;
  @media (min-width: 300px){
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
        "advert header"
        "advert content"
        "advert footer";
  @media (min-width: 400px){
      /* change the code below this line */
      grid-template-rows: auto 1fr auto;
        "advert header"
        "advert content"
        "advert footer";
    /* change the code above this line */

<div class="container">
  <div class="item1">header</div>
  <div class="item2">advert</div>
  <div class="item3">content</div>
  <div class="item4">footer</div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36.

Link to the challenge:


So at 300px this represents a grid of 2 columns, 3 rows.
The left column is all advert and the right column is row1 header, row2 content and row3 is footer

        "advert  header"
        "advert  content"
        "advert  footer"

At 400px that needs to change. Still 2 cols and 3 rows but
Header takes top row across both columns
Middle row split between advert and content
Bottom row all footer across both columns

        "c1r1   c2r1"
        "c1r2   c2r2"
        "c1r3   c2r3"

Try replacing the col/row placeholders on the grid with the name of grid area that should occupy that space.

Good luck!

1 Like