Twitter Bootstrap Question posted in

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

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.

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>

edit: fixed typo

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    Definitely a media query will help there! Css Grid is container based, so it’s very easy to reshape the whole layout with a media query! To make it even cleaner you could investigate about the grid-area feature

    I do cover all this in depth in this article here It is a very interesting subject

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search