个人中心
gpt4 book ai didi

html - 如何让 “grid-(row or column): span 2” 在较小的设备上响应？

转载 作者：行者123 更新时间：2023-11-28 14:37:12 25 4
gpt4 key购买 nike

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

的输出

此外，如果我注释掉 :nth-child(4) 和 :last-child，输出将与 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>

编辑:修复错字

最佳答案

你需要一个媒体查询

  > :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你有代码笔，如果有帮助请告诉我

关于html - 如何让 “grid-(row or column): span 2” 在较小的设备上响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53330381/

25 4 0
文章推荐： css - IE CSS嵌套水平列表位置
文章推荐： javascript - 组件未在 map 功能内渲染 - React Native
文章推荐： javascript - 无法删除 javascript 对象属性
文章推荐： javascript - 在其他标记之上显示传单circleMarker？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com