How can i make “grid-(row or column): span 2” be responsive on smaller devices?

how can i make grid-(row or column): span 2 be responsive?
what i mean is, if i resize the screen to mobile, it should look something like output of col-sm-12

also, if i comment out :nth-child(4) & :last-child, the output will look exactly like col-sm-12

Please i need help :(

codepen code

.card-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  grid-auto-rows: minmax(250px, 1fr);

  grid-auto-flow: dense;

  grid-gap: 5px;

  padding: 5px;

}

.card-grid figure {

  margin: 0;

  position: relative;

}

.card-grid figure img {

  position: absolute;

  height: 100%;

  width: 100%;

  -o-object-fit: cover;

     object-fit: cover;

}

.card-grid figure figcaption {

  position: absolute;

  height: 75px;

  left: 15px;

  right: 15px;

  bottom: 15px;

  background: rgba(71, 127, 45, 0.75);

  padding: 15px;

  color: white;

  overflow: hidden;

}

.card-grid figure figcaption blockquote {

  height: 60px;

  overflow: hidden;

}

.card-grid > :nth-child(4) {

  grid-row: span 2;

}

.card-grid > :last-child {

  grid-column: span 2;

}

.card-grid .card-event {

  display: flex;

  position: relative;

  align-items: center;

  justify-content: space-around;

  color: white;

  background: rgba(0, 0, 0, 0.5);

}

.card-grid .card-event img {

  position: absolute;

  height: 100%;

  width: 100%;

  z-index: -1;

  -o-object-fit: cover;

     object-fit: cover;

}

.card-grid .card-event .event-date {

  text-align: center;

  height: 120px;

}

.card-grid .card-event .event-date > :nth-child(2) {

  font-size: 2em;

  border-left: 7px solid #477f2d;

  border-right: 7px solid #477f2d;

  margin: 0;

  height: 50px;

  background: white;

  color: #477f2d;

}

.card-grid .card-event .event-date > :nth-child(odd) {

  height: 28px;

  background: #477f2d;

}

.card-grid .card-event .event-description {

  text-align: center;

}

.card-grid .card-event .event-description > :nth-child(1n + 0) {

  padding: 0;

  margin: 0;

}

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-grid.min.css" rel="stylesheet"/>

</head>

<body>

<main role="main">

 <section class="container card-grid">

  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496761/mis/mis-homepage/2kids-reading.jpg" alt="two kids reading a book">

   <figcaption>

    <h4>Year 3 Students</h4>

    <blockquote>

     <p>Spends more of their free time in the Library. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>

  <div class="card-event">

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496765/mis/mis-homepage/football.jpg" alt="">

   <div class="event-date">

    <div>SEP</div>

    <p>17</p>

    <div>MON</div>

   </div>

   <div class="event-description">

    <h2>Under 11 Mixed</h2>

    <h3>Football Match</h3>

    <p>ISC vs MIS<br> (venue <strong>@ISC</strong>)</p>

   </div>

  </div>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496829/mis/mis-homepage/Mr-Mark.jpg" alt="School Principal's speech on the stage">

   <figcaption>

    <h4>Principal's Graduation Speech</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496791/mis/mis-homepage/library.jpg" alt="Teacher reading a book to his student">

   <figcaption>

    <h4>Journey of a Future Bookworm</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>



  <div class="card-event">

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496765/mis/mis-homepage/football.jpg" alt="">

   <div class="event-date">

    <div>SEP</div>

    <p>18</p>

    <div>TUE</div>

   </div>

   <div class="event-description">

    <h2>Under 13 Boys</h2>

    <h3>Football Match</h3>

    <p>St. Andrews vs MIS<br> (venue <strong>@MIS</strong>)</p>

   </div>

  </div>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496800/mis/mis-homepage/Mr-Craig.jpg" alt="Mr. Craig Jenkins storytelling to the students">

   <figcaption>

    <h4>Mr. Craig's Charismatic Storytelling</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>

 </section>



</main>

</body>

</html>

edited Nov 16 '18 at 2:21

Michael_B

156k50253361

asked Nov 16 '18 at 1:55

Jaeyson Anthony Y.

1414

1

Have you tried adjusting the span rule in a media query?

– Michael_B
Nov 16 '18 at 2:21

@Michael_B thanks for pointing it out. I always forget the little things like media query.

– Jaeyson Anthony Y.
Nov 16 '18 at 4:14

add a comment |

how can i make grid-(row or column): span 2 be responsive?
what i mean is, if i resize the screen to mobile, it should look something like output of col-sm-12

also, if i comment out :nth-child(4) & :last-child, the output will look exactly like col-sm-12

Please i need help :(

codepen code

.card-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  grid-auto-rows: minmax(250px, 1fr);

  grid-auto-flow: dense;

  grid-gap: 5px;

  padding: 5px;

}

.card-grid figure {

  margin: 0;

  position: relative;

}

.card-grid figure img {

  position: absolute;

  height: 100%;

  width: 100%;

  -o-object-fit: cover;

     object-fit: cover;

}

.card-grid figure figcaption {

  position: absolute;

  height: 75px;

  left: 15px;

  right: 15px;

  bottom: 15px;

  background: rgba(71, 127, 45, 0.75);

  padding: 15px;

  color: white;

  overflow: hidden;

}

.card-grid figure figcaption blockquote {

  height: 60px;

  overflow: hidden;

}

.card-grid > :nth-child(4) {

  grid-row: span 2;

}

.card-grid > :last-child {

  grid-column: span 2;

}

.card-grid .card-event {

  display: flex;

  position: relative;

  align-items: center;

  justify-content: space-around;

  color: white;

  background: rgba(0, 0, 0, 0.5);

}

.card-grid .card-event img {

  position: absolute;

  height: 100%;

  width: 100%;

  z-index: -1;

  -o-object-fit: cover;

     object-fit: cover;

}

.card-grid .card-event .event-date {

  text-align: center;

  height: 120px;

}

.card-grid .card-event .event-date > :nth-child(2) {

  font-size: 2em;

  border-left: 7px solid #477f2d;

  border-right: 7px solid #477f2d;

  margin: 0;

  height: 50px;

  background: white;

  color: #477f2d;

}

.card-grid .card-event .event-date > :nth-child(odd) {

  height: 28px;

  background: #477f2d;

}

.card-grid .card-event .event-description {

  text-align: center;

}

.card-grid .card-event .event-description > :nth-child(1n + 0) {

  padding: 0;

  margin: 0;

}

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-grid.min.css" rel="stylesheet"/>

</head>

<body>

<main role="main">

 <section class="container card-grid">

  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496761/mis/mis-homepage/2kids-reading.jpg" alt="two kids reading a book">

   <figcaption>

    <h4>Year 3 Students</h4>

    <blockquote>

     <p>Spends more of their free time in the Library. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>

  <div class="card-event">

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496765/mis/mis-homepage/football.jpg" alt="">

   <div class="event-date">

    <div>SEP</div>

    <p>17</p>

    <div>MON</div>

   </div>

   <div class="event-description">

    <h2>Under 11 Mixed</h2>

    <h3>Football Match</h3>

    <p>ISC vs MIS<br> (venue <strong>@ISC</strong>)</p>

   </div>

  </div>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496829/mis/mis-homepage/Mr-Mark.jpg" alt="School Principal's speech on the stage">

   <figcaption>

    <h4>Principal's Graduation Speech</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496791/mis/mis-homepage/library.jpg" alt="Teacher reading a book to his student">

   <figcaption>

    <h4>Journey of a Future Bookworm</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>



  <div class="card-event">

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496765/mis/mis-homepage/football.jpg" alt="">

   <div class="event-date">

    <div>SEP</div>

    <p>18</p>

    <div>TUE</div>

   </div>

   <div class="event-description">

    <h2>Under 13 Boys</h2>

    <h3>Football Match</h3>

    <p>St. Andrews vs MIS<br> (venue <strong>@MIS</strong>)</p>

   </div>

  </div>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496800/mis/mis-homepage/Mr-Craig.jpg" alt="Mr. Craig Jenkins storytelling to the students">

   <figcaption>

    <h4>Mr. Craig's Charismatic Storytelling</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>

 </section>



</main>

</body>

</html>

edited Nov 16 '18 at 2:21

Michael_B

156k50253361

asked Nov 16 '18 at 1:55

Jaeyson Anthony Y.

1414

1

Have you tried adjusting the span rule in a media query?

– Michael_B
Nov 16 '18 at 2:21

@Michael_B thanks for pointing it out. I always forget the little things like media query.

– Jaeyson Anthony Y.
Nov 16 '18 at 4:14

add a comment |

how can i make grid-(row or column): span 2 be responsive?
what i mean is, if i resize the screen to mobile, it should look something like output of col-sm-12

also, if i comment out :nth-child(4) & :last-child, the output will look exactly like col-sm-12

Please i need help :(

codepen code

.card-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  grid-auto-rows: minmax(250px, 1fr);

  grid-auto-flow: dense;

  grid-gap: 5px;

  padding: 5px;

}

.card-grid figure {

  margin: 0;

  position: relative;

}

.card-grid figure img {

  position: absolute;

  height: 100%;

  width: 100%;

  -o-object-fit: cover;

     object-fit: cover;

}

.card-grid figure figcaption {

  position: absolute;

  height: 75px;

  left: 15px;

  right: 15px;

  bottom: 15px;

  background: rgba(71, 127, 45, 0.75);

  padding: 15px;

  color: white;

  overflow: hidden;

}

.card-grid figure figcaption blockquote {

  height: 60px;

  overflow: hidden;

}

.card-grid > :nth-child(4) {

  grid-row: span 2;

}

.card-grid > :last-child {

  grid-column: span 2;

}

.card-grid .card-event {

  display: flex;

  position: relative;

  align-items: center;

  justify-content: space-around;

  color: white;

  background: rgba(0, 0, 0, 0.5);

}

.card-grid .card-event img {

  position: absolute;

  height: 100%;

  width: 100%;

  z-index: -1;

  -o-object-fit: cover;

     object-fit: cover;

}

.card-grid .card-event .event-date {

  text-align: center;

  height: 120px;

}

.card-grid .card-event .event-date > :nth-child(2) {

  font-size: 2em;

  border-left: 7px solid #477f2d;

  border-right: 7px solid #477f2d;

  margin: 0;

  height: 50px;

  background: white;

  color: #477f2d;

}

.card-grid .card-event .event-date > :nth-child(odd) {

  height: 28px;

  background: #477f2d;

}

.card-grid .card-event .event-description {

  text-align: center;

}

.card-grid .card-event .event-description > :nth-child(1n + 0) {

  padding: 0;

  margin: 0;

}

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-grid.min.css" rel="stylesheet"/>

</head>

<body>

<main role="main">

 <section class="container card-grid">

  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496761/mis/mis-homepage/2kids-reading.jpg" alt="two kids reading a book">

   <figcaption>

    <h4>Year 3 Students</h4>

    <blockquote>

     <p>Spends more of their free time in the Library. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>

  <div class="card-event">

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496765/mis/mis-homepage/football.jpg" alt="">

   <div class="event-date">

    <div>SEP</div>

    <p>17</p>

    <div>MON</div>

   </div>

   <div class="event-description">

    <h2>Under 11 Mixed</h2>

    <h3>Football Match</h3>

    <p>ISC vs MIS<br> (venue <strong>@ISC</strong>)</p>

   </div>

  </div>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496829/mis/mis-homepage/Mr-Mark.jpg" alt="School Principal's speech on the stage">

   <figcaption>

    <h4>Principal's Graduation Speech</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496791/mis/mis-homepage/library.jpg" alt="Teacher reading a book to his student">

   <figcaption>

    <h4>Journey of a Future Bookworm</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>



  <div class="card-event">

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496765/mis/mis-homepage/football.jpg" alt="">

   <div class="event-date">

    <div>SEP</div>

    <p>18</p>

    <div>TUE</div>

   </div>

   <div class="event-description">

    <h2>Under 13 Boys</h2>

    <h3>Football Match</h3>

    <p>St. Andrews vs MIS<br> (venue <strong>@MIS</strong>)</p>

   </div>

  </div>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496800/mis/mis-homepage/Mr-Craig.jpg" alt="Mr. Craig Jenkins storytelling to the students">

   <figcaption>

    <h4>Mr. Craig's Charismatic Storytelling</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>

 </section>



</main>

</body>

</html>

edited Nov 16 '18 at 2:21

Michael_B

156k50253361

asked Nov 16 '18 at 1:55

Jaeyson Anthony Y.

1414

how can i make grid-(row or column): span 2 be responsive?
what i mean is, if i resize the screen to mobile, it should look something like output of col-sm-12

also, if i comment out :nth-child(4) & :last-child, the output will look exactly like col-sm-12

Please i need help :(

codepen code

.card-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  grid-auto-rows: minmax(250px, 1fr);

  grid-auto-flow: dense;

  grid-gap: 5px;

  padding: 5px;

}

.card-grid figure {

  margin: 0;

  position: relative;

}

.card-grid figure img {

  position: absolute;

  height: 100%;

  width: 100%;

  -o-object-fit: cover;

     object-fit: cover;

}

.card-grid figure figcaption {

  position: absolute;

  height: 75px;

  left: 15px;

  right: 15px;

  bottom: 15px;

  background: rgba(71, 127, 45, 0.75);

  padding: 15px;

  color: white;

  overflow: hidden;

}

.card-grid figure figcaption blockquote {

  height: 60px;

  overflow: hidden;

}

.card-grid > :nth-child(4) {

  grid-row: span 2;

}

.card-grid > :last-child {

  grid-column: span 2;

}

.card-grid .card-event {

  display: flex;

  position: relative;

  align-items: center;

  justify-content: space-around;

  color: white;

  background: rgba(0, 0, 0, 0.5);

}

.card-grid .card-event img {

  position: absolute;

  height: 100%;

  width: 100%;

  z-index: -1;

  -o-object-fit: cover;

     object-fit: cover;

}

.card-grid .card-event .event-date {

  text-align: center;

  height: 120px;

}

.card-grid .card-event .event-date > :nth-child(2) {

  font-size: 2em;

  border-left: 7px solid #477f2d;

  border-right: 7px solid #477f2d;

  margin: 0;

  height: 50px;

  background: white;

  color: #477f2d;

}

.card-grid .card-event .event-date > :nth-child(odd) {

  height: 28px;

  background: #477f2d;

}

.card-grid .card-event .event-description {

  text-align: center;

}

.card-grid .card-event .event-description > :nth-child(1n + 0) {

  padding: 0;

  margin: 0;

}

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-grid.min.css" rel="stylesheet"/>

</head>

<body>

<main role="main">

 <section class="container card-grid">

  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496761/mis/mis-homepage/2kids-reading.jpg" alt="two kids reading a book">

   <figcaption>

    <h4>Year 3 Students</h4>

    <blockquote>

     <p>Spends more of their free time in the Library. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>

  <div class="card-event">

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496765/mis/mis-homepage/football.jpg" alt="">

   <div class="event-date">

    <div>SEP</div>

    <p>17</p>

    <div>MON</div>

   </div>

   <div class="event-description">

    <h2>Under 11 Mixed</h2>

    <h3>Football Match</h3>

    <p>ISC vs MIS<br> (venue <strong>@ISC</strong>)</p>

   </div>

  </div>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496829/mis/mis-homepage/Mr-Mark.jpg" alt="School Principal's speech on the stage">

   <figcaption>

    <h4>Principal's Graduation Speech</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496791/mis/mis-homepage/library.jpg" alt="Teacher reading a book to his student">

   <figcaption>

    <h4>Journey of a Future Bookworm</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>



  <div class="card-event">

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496765/mis/mis-homepage/football.jpg" alt="">

   <div class="event-date">

    <div>SEP</div>

    <p>18</p>

    <div>TUE</div>

   </div>

   <div class="event-description">

    <h2>Under 13 Boys</h2>

    <h3>Football Match</h3>

    <p>St. Andrews vs MIS<br> (venue <strong>@MIS</strong>)</p>

   </div>

  </div>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496800/mis/mis-homepage/Mr-Craig.jpg" alt="Mr. Craig Jenkins storytelling to the students">

   <figcaption>

    <h4>Mr. Craig's Charismatic Storytelling</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>

 </section>



</main>

</body>

</html>

.card-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  grid-auto-rows: minmax(250px, 1fr);

  grid-auto-flow: dense;

  grid-gap: 5px;

  padding: 5px;

}

.card-grid figure {

  margin: 0;

  position: relative;

}

.card-grid figure img {

  position: absolute;

  height: 100%;

  width: 100%;

  -o-object-fit: cover;

     object-fit: cover;

}

.card-grid figure figcaption {

  position: absolute;

  height: 75px;

  left: 15px;

  right: 15px;

  bottom: 15px;

  background: rgba(71, 127, 45, 0.75);

  padding: 15px;

  color: white;

  overflow: hidden;

}

.card-grid figure figcaption blockquote {

  height: 60px;

  overflow: hidden;

}

.card-grid > :nth-child(4) {

  grid-row: span 2;

}

.card-grid > :last-child {

  grid-column: span 2;

}

.card-grid .card-event {

  display: flex;

  position: relative;

  align-items: center;

  justify-content: space-around;

  color: white;

  background: rgba(0, 0, 0, 0.5);

}

.card-grid .card-event img {

  position: absolute;

  height: 100%;

  width: 100%;

  z-index: -1;

  -o-object-fit: cover;

     object-fit: cover;

}

.card-grid .card-event .event-date {

  text-align: center;

  height: 120px;

}

.card-grid .card-event .event-date > :nth-child(2) {

  font-size: 2em;

  border-left: 7px solid #477f2d;

  border-right: 7px solid #477f2d;

  margin: 0;

  height: 50px;

  background: white;

  color: #477f2d;

}

.card-grid .card-event .event-date > :nth-child(odd) {

  height: 28px;

  background: #477f2d;

}

.card-grid .card-event .event-description {

  text-align: center;

}

.card-grid .card-event .event-description > :nth-child(1n + 0) {

  padding: 0;

  margin: 0;

}

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-grid.min.css" rel="stylesheet"/>

</head>

<body>

<main role="main">

 <section class="container card-grid">

  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496761/mis/mis-homepage/2kids-reading.jpg" alt="two kids reading a book">

   <figcaption>

    <h4>Year 3 Students</h4>

    <blockquote>

     <p>Spends more of their free time in the Library. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>

  <div class="card-event">

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496765/mis/mis-homepage/football.jpg" alt="">

   <div class="event-date">

    <div>SEP</div>

    <p>17</p>

    <div>MON</div>

   </div>

   <div class="event-description">

    <h2>Under 11 Mixed</h2>

    <h3>Football Match</h3>

    <p>ISC vs MIS<br> (venue <strong>@ISC</strong>)</p>

   </div>

  </div>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496829/mis/mis-homepage/Mr-Mark.jpg" alt="School Principal's speech on the stage">

   <figcaption>

    <h4>Principal's Graduation Speech</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496791/mis/mis-homepage/library.jpg" alt="Teacher reading a book to his student">

   <figcaption>

    <h4>Journey of a Future Bookworm</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>



  <div class="card-event">

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496765/mis/mis-homepage/football.jpg" alt="">

   <div class="event-date">

    <div>SEP</div>

    <p>18</p>

    <div>TUE</div>

   </div>

   <div class="event-description">

    <h2>Under 13 Boys</h2>

    <h3>Football Match</h3>

    <p>St. Andrews vs MIS<br> (venue <strong>@MIS</strong>)</p>

   </div>

  </div>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496800/mis/mis-homepage/Mr-Craig.jpg" alt="Mr. Craig Jenkins storytelling to the students">

   <figcaption>

    <h4>Mr. Craig's Charismatic Storytelling</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>

 </section>



</main>

</body>

</html>

.card-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  grid-auto-rows: minmax(250px, 1fr);

  grid-auto-flow: dense;

  grid-gap: 5px;

  padding: 5px;

}

.card-grid figure {

  margin: 0;

  position: relative;

}

.card-grid figure img {

  position: absolute;

  height: 100%;

  width: 100%;

  -o-object-fit: cover;

     object-fit: cover;

}

.card-grid figure figcaption {

  position: absolute;

  height: 75px;

  left: 15px;

  right: 15px;

  bottom: 15px;

  background: rgba(71, 127, 45, 0.75);

  padding: 15px;

  color: white;

  overflow: hidden;

}

.card-grid figure figcaption blockquote {

  height: 60px;

  overflow: hidden;

}

.card-grid > :nth-child(4) {

  grid-row: span 2;

}

.card-grid > :last-child {

  grid-column: span 2;

}

.card-grid .card-event {

  display: flex;

  position: relative;

  align-items: center;

  justify-content: space-around;

  color: white;

  background: rgba(0, 0, 0, 0.5);

}

.card-grid .card-event img {

  position: absolute;

  height: 100%;

  width: 100%;

  z-index: -1;

  -o-object-fit: cover;

     object-fit: cover;

}

.card-grid .card-event .event-date {

  text-align: center;

  height: 120px;

}

.card-grid .card-event .event-date > :nth-child(2) {

  font-size: 2em;

  border-left: 7px solid #477f2d;

  border-right: 7px solid #477f2d;

  margin: 0;

  height: 50px;

  background: white;

  color: #477f2d;

}

.card-grid .card-event .event-date > :nth-child(odd) {

  height: 28px;

  background: #477f2d;

}

.card-grid .card-event .event-description {

  text-align: center;

}

.card-grid .card-event .event-description > :nth-child(1n + 0) {

  padding: 0;

  margin: 0;

}

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-grid.min.css" rel="stylesheet"/>

</head>

<body>

<main role="main">

 <section class="container card-grid">

  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496761/mis/mis-homepage/2kids-reading.jpg" alt="two kids reading a book">

   <figcaption>

    <h4>Year 3 Students</h4>

    <blockquote>

     <p>Spends more of their free time in the Library. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>

  <div class="card-event">

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496765/mis/mis-homepage/football.jpg" alt="">

   <div class="event-date">

    <div>SEP</div>

    <p>17</p>

    <div>MON</div>

   </div>

   <div class="event-description">

    <h2>Under 11 Mixed</h2>

    <h3>Football Match</h3>

    <p>ISC vs MIS<br> (venue <strong>@ISC</strong>)</p>

   </div>

  </div>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496829/mis/mis-homepage/Mr-Mark.jpg" alt="School Principal's speech on the stage">

   <figcaption>

    <h4>Principal's Graduation Speech</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496791/mis/mis-homepage/library.jpg" alt="Teacher reading a book to his student">

   <figcaption>

    <h4>Journey of a Future Bookworm</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>



  <div class="card-event">

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496765/mis/mis-homepage/football.jpg" alt="">

   <div class="event-date">

    <div>SEP</div>

    <p>18</p>

    <div>TUE</div>

   </div>

   <div class="event-description">

    <h2>Under 13 Boys</h2>

    <h3>Football Match</h3>

    <p>St. Andrews vs MIS<br> (venue <strong>@MIS</strong>)</p>

   </div>

  </div>



  <figure>

   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496800/mis/mis-homepage/Mr-Craig.jpg" alt="Mr. Craig Jenkins storytelling to the students">

   <figcaption>

    <h4>Mr. Craig's Charismatic Storytelling</h4>

    <blockquote>

     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>

    </blockquote>

    <a class="btn btn-info" href="#">Read More</a>

   </figcaption>

  </figure>

 </section>



</main>

</body>

</html>

css html5 twitter-bootstrap css3 css-grid

edited Nov 16 '18 at 2:21

Michael_B

156k50253361

asked Nov 16 '18 at 1:55

Jaeyson Anthony Y.

1414

edited Nov 16 '18 at 2:21

Michael_B

156k50253361

asked Nov 16 '18 at 1:55

Jaeyson Anthony Y.

1414

edited Nov 16 '18 at 2:21

Michael_B

156k50253361

edited Nov 16 '18 at 2:21

Michael_B

156k50253361

edited Nov 16 '18 at 2:21

Michael_B

156k50253361

asked Nov 16 '18 at 1:55

Jaeyson Anthony Y.

1414

asked Nov 16 '18 at 1:55

Jaeyson Anthony Y.

1414

asked Nov 16 '18 at 1:55

Jaeyson Anthony Y.

1414

1

Have you tried adjusting the span rule in a media query?

– Michael_B
Nov 16 '18 at 2:21

@Michael_B thanks for pointing it out. I always forget the little things like media query.

– Jaeyson Anthony Y.
Nov 16 '18 at 4:14

add a comment |

1

Have you tried adjusting the span rule in a media query?

– Michael_B
Nov 16 '18 at 2:21

@Michael_B thanks for pointing it out. I always forget the little things like media query.

– Jaeyson Anthony Y.
Nov 16 '18 at 4:14

Have you tried adjusting the span rule in a media query?

– Michael_B
Nov 16 '18 at 2:21

@Michael_B thanks for pointing it out. I always forget the little things like media query.

– Jaeyson Anthony Y.
Nov 16 '18 at 4:14

add a comment |

1 Answer
1

active

oldest

votes

You need a media query

  > :last-child {

    grid-column: span 0; /*Change this to 0*/

  }



  @media only screen and (min-width: 576px){

   > :last-child {

    grid-column: span 2; /*Change to 2 for screens larger than 576px*/

   }

 }

Here you have a codepen, let me know if that helps

answered Nov 16 '18 at 3:04

MartinBA

7161213

thanks. I was looking for alternative way aside from using media query. I'll use this.

– Jaeyson Anthony Y.
Dec 13 '18 at 7:56

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330381%2fhow-can-i-make-grid-row-or-column-span-2-be-responsive-on-smaller-devices%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You need a media query

  > :last-child {

    grid-column: span 0; /*Change this to 0*/

  }



  @media only screen and (min-width: 576px){

   > :last-child {

    grid-column: span 2; /*Change to 2 for screens larger than 576px*/

   }

 }

Here you have a codepen, let me know if that helps

answered Nov 16 '18 at 3:04

MartinBA

7161213

thanks. I was looking for alternative way aside from using media query. I'll use this.

– Jaeyson Anthony Y.
Dec 13 '18 at 7:56

add a comment |

You need a media query

  > :last-child {

    grid-column: span 0; /*Change this to 0*/

  }



  @media only screen and (min-width: 576px){

   > :last-child {

    grid-column: span 2; /*Change to 2 for screens larger than 576px*/

   }

 }

Here you have a codepen, let me know if that helps

answered Nov 16 '18 at 3:04

MartinBA

7161213

thanks. I was looking for alternative way aside from using media query. I'll use this.

– Jaeyson Anthony Y.
Dec 13 '18 at 7:56

add a comment |

You need a media query

  > :last-child {

    grid-column: span 0; /*Change this to 0*/

  }



  @media only screen and (min-width: 576px){

   > :last-child {

    grid-column: span 2; /*Change to 2 for screens larger than 576px*/

   }

 }

Here you have a codepen, let me know if that helps

answered Nov 16 '18 at 3:04

MartinBA

7161213

You need a media query

  > :last-child {

    grid-column: span 0; /*Change this to 0*/

  }



  @media only screen and (min-width: 576px){

   > :last-child {

    grid-column: span 2; /*Change to 2 for screens larger than 576px*/

   }

 }

Here you have a codepen, let me know if that helps

answered Nov 16 '18 at 3:04

MartinBA

7161213

answered Nov 16 '18 at 3:04

MartinBA

7161213

answered Nov 16 '18 at 3:04

MartinBA

7161213

answered Nov 16 '18 at 3:04

MartinBA

7161213

thanks. I was looking for alternative way aside from using media query. I'll use this.

– Jaeyson Anthony Y.
Dec 13 '18 at 7:56

add a comment |

thanks. I was looking for alternative way aside from using media query. I'll use this.

– Jaeyson Anthony Y.
Dec 13 '18 at 7:56

thanks. I was looking for alternative way aside from using media query. I'll use this.

– Jaeyson Anthony Y.
Dec 13 '18 at 7:56

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky