网格确定大小后，如何裁剪超出网格的内容？

来源：5-13 综合案例一(百度热词风云榜)

ForCoke

2022-06-16

.top-list{
  height: 352px;
  margin: 0 14px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 
  "a1 a3 a3"
  "a2 a3 a3"
  "a4 a4 a5"
  "a6 a7 a7";
  gap: 8px;
}

老师请问一下：此时整个grid容器的大小确定了，每个网格的大小也确定了。但是网格中的内容如果较多的时候，会将网格撑开，从而改变整个高度。所以有什么办法可以去除超出网格大小的内容？
图片描述

写回答

1回答

西门老舅

2022-06-17

已采纳

你好，可以给每一个子项添加overflow:hidden;

.top-list div{

overflow: hidden;

}

ForCoke

非常感谢！

2022-06-26

共3条回复

前端内功修炼 5大主流布局系统进阶

前端内功修炼：5大主流布局系统进阶

758 学习 · 231 问题

查看课程

相似问题

关于图片的大小问题

回答 1

网格布局的兼容性问题

回答 1

新手求问，网格布局在实际开发中常用吗？是否要掌握的很深入

回答 1

这种超大图布局一般什么场景下用得到？

回答 1

如何解决图片裁剪的问题

回答 1

打开慕课网App查看更多内容