使用subgrid实现Grid子项对齐实例页面

回到相关文章 »

效果：

下一句是什么来着，哈哈哈，总之标题有点长

负责人：张鑫旭

CSS新世界 是非常优质的一本书籍，作者写的东西在业界有口皆碑，里面的内容还是可以学到很多知识的。
3人参与 11月24日

测试子

负责人：张鑫旭

22222
2人参与 11月24日

HTML并不简单

负责人：张鑫旭

绝对物有所值！
2人参与 11月24日

CSS选择器世界

负责人：张鑫旭

经验，技巧与系统学习
2人参与 11月24日

代码：

CSS代码：
.container {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: .5rem;
}
/* 以下CSS与布局无关 */
.item {
    padding: .75rem;
    background: #f0f3f9;
}
.item blockquote {
    background-color: skyblue;
}
.item h4 {
    background-color: #333;
    color: #fff;
}
HTML代码：
<div class="container">
    <section class="item">
        <h4>标题</h4>
        <p>负责人：张鑫旭</p>
        <blockquote>描述...</blockquote>
        <footer>3人参与 11月24日</footer>
    </section>
    ... <!-- 重复N次 -->
</div>