如何使grid-(行或列):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>编辑:修正拼写错误
最佳答案
您需要媒体查询
> :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，如果有帮助请告诉我
关于html - 如何使 “grid-(row or column): span 2” 在较小的设备上做出响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53330381/