I Was Trying To Make My Grid Responsive Using Grid-template And Media Query

im new to CSS and was exploring how to display one item in the first row but display 2 items in the second row when the size of the viewport is greater than 800px. but when size

Solution 1:

Media query rules don't take precedence over other rules, they still work within the context of the cascade. Just move the media query below the original .parent styles.

.parent {
  display: grid;
  grid-template-columns: 100px100px;
  grid-template-rows: 50px50px;
  grid-template-areas: "first first""second third";
}

@media (max-width:800px) {
  .parent {
    display: grid;
    grid-template-columns: 100px;
    grid-template-rows: 50px50px50px;
    grid-template-areas: "first""second""third";
  }
}


.first {
  grid-area: first;
  background-color: blue;
}

.second {
  grid-area: second;
  background-color: red;
}

.third {
  grid-area: third;
  background-color: green;
}

<divclass="parent"><divclass="first div">Lorem ipsum dolor sit amet </div><divclass="second div">Lorem ipsum dolor sit amet</div><divclass="third div">Lorem ipsum dolor sit amet</div></div>