Question

我如何使grid-(row or column): span 2具有响应能力？我的意思是，如果我将屏幕调整为移动尺寸，它应该看起来像col-sm-12

的输出

此外，如果我将:nth-child(4)和:last-child注释掉，则输出将与col-sm-12完全相同

请我需要帮助：（

.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>

Answer 1

您需要媒体查询

  > :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您有一个Codepen，请告诉我是否有帮助

Answer 2

媒体查询肯定会有所帮助！ Css Grid 是基于容器的，因此使用媒体查询重塑整个布局非常容易！为了使它更干净，您可以调查网格区域功能

我确实在这篇文章中深入介绍了所有这些here这是一个非常有趣的主题

如何在较小的设备上响应“网格（（行或列）：跨度2”）？

2 个答案: