CSS Grid not changing in responsive

Question

I created a grid Container and wanted to make it Responsive, below i have added my HTML & CSS, the responsive css is not working.

I have this Grid Container:

.grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
}

.grid-container div {
  text-align: justify;
}

.item2 {
  grid-column: 1fr 1fr;
  grid-row: 2 / span 2;
  text-align: center !important;
}

@media screen and (max-width:425px) {
  .grid-container {
    display: grid;
    grid-template-columns: 100%;
    grid-row-gap: 50px;
  }
  .item2 {
    grid-column: 1fr;
    grid-row: 2 / span 2;
    text-align: center !important;
  }
}

<div class="grid-container">
  <div class="grid-item item1">
    <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions
      from the 1914 translation by H. Rackham.</p>
  </div>
  <div class="grid-item item2">
    <img src="./images/lorem.jpg" alt="What is Loerem Ipsum?" />
  </div>
  <div class="grid-item item3">
    <p>Aenean pharetra orci id nisl commodo fringilla. Vestibulum nec ante a risus cursus feugiat at quis mi. Phasellus vel arcu tincidunt, egestas sem eget, lacinia mauris. Suspendisse vitae enim ac justo pulvinar vehicula. Sed luctus est nec scelerisque
      placerat. Nam fermentum at dolor a ullamcorper. Suspendisse potenti. Phasellus finibus ullamcorper urna, nec vehicula libero suscipit in.</p>
  </div>
  <div class="grid-item item4">
    <strong>Where does it come from?</strong>
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
      up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, </p>
  </div>
  <div class="grid-item item5">
    <strong>Where can I get some?</strong>
    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
      you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
  </div>
</div>

But is not changing to single column on mobile layout, please guide me what am doing wrong.

Thanks,

Answer 1

You are using: .item2 { grid-column: 1fr 1fr } which should actually be span 2. Then simply reset it within the media query to span only 1 as it otherwise will enforce a 2 columns layout (indication enforcement).

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
}

.grid-container div {
  text-align: justify;
}

.item2 {
  grid-column: 1 span 2;
  grid-row: 2 / span 2;
}

@media screen and (max-width:425px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
  .item2 {
    grid-column: 1 / span 1;
  }
}

<div class="grid-container">
  <div class="grid-item item1">
    <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions
      from the 1914 translation by H. Rackham.</p>
  </div>
  <div class="grid-item item2">
    <img src="./images/lorem.jpg" alt="What is Loerem Ipsum?" />
  </div>
  <div class="grid-item item3">
    <p>Aenean pharetra orci id nisl commodo fringilla. Vestibulum nec ante a risus cursus feugiat at quis mi. Phasellus vel arcu tincidunt, egestas sem eget, lacinia mauris. Suspendisse vitae enim ac justo pulvinar vehicula. Sed luctus est nec scelerisque
      placerat. Nam fermentum at dolor a ullamcorper. Suspendisse potenti. Phasellus finibus ullamcorper urna, nec vehicula libero suscipit in.</p>
  </div>
  <div class="grid-item item4">
    <strong>Where does it come from?</strong>
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
      up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, </p>
  </div>
  <div class="grid-item item5">
    <strong>Where can I get some?</strong>
    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
      you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
  </div>
</div>