Html Css网格-顶行限制高度

在我的web应用程序中，我使用css网格构建基本主页。我希望顶部网格项：项-1尽可能高，以便整个网格填充视口。参见图

因此，在底部不留任何间隙。我尝试过调整包装器的高度、网格模板行中的行高度，以及更改每个项目的网格列值中的数字。如何使项目1覆盖视口的更多部分，并将其下方的4个项目向下移动以接触底部

.wrapper{
利润上限：-25px；
宽度：100vw；
高度：70vh；
//边框：2个实心#ccc；
显示：网格；
网格间距：3倍；
网格模板列：重复（490px）；
网格模板行：重复（4100px）；
证明内容：中心；
对齐内容：结束；
垫底：10px；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：10px；
字体大小：150%；
文本对齐：居中；
}
.项目-1{
边缘顶部：50px；
背景图像：url（../assets/imgs/placeholder.png）；
网格柱：1/5；
网格行：1/5；
}
.项目-2{
网格柱：1/3；
背景色：rgba（2502502500.1）；
}
.项目-3{
网格柱：3/5；
背景色：rgba（2502502500.4）；
}
.项目-4{
网格柱：1/3；
背景色：rgba（2502502500.4）；
}
.项目-5{
网格柱：3/5；
背景色：rgba（2502502500.4）；
}

关于
如何
列表
联系我们

制作

宽度：100vh

到您的

.wrapper

和

.item-1

div可能就是您要找的。这样就不需要负边距、填充底部和对齐内容属性

希望有帮助

.wrapper{
/*利润上限：-25px*/
宽度：100vw；
高度：100vh；/*制造100vh*/
/*//边框：2px实心#ccc*/
显示：网格；
网格间距：3倍；
网格模板列：重复（490px）；
网格模板行：重复（4100px）；
证明内容：中心；
/*对齐内容：结束*/
/*垫底：10px*/
}
.盒子{
背景颜色：橙色；
颜色：#fff；
边界半径：5px；
填充：10px；
字体大小：150%；
文本对齐：居中；
}
.项目-1{
/*边缘顶部：50px*/
背景图像：url（../assets/imgs/placeholder.png）；
网格柱：1/5；
网格行：1/5；
高度：100vh；
}
.项目-2{
网格柱：1/3；
背景色：rgba（2502502500.1）；
}
.项目-3{
网格柱：3/5；
背景色：rgba（2502502500.4）；
}
.项目-4{
网格柱：1/3；
背景色：rgba（2502502500.4）；
}
.项目-5{
网格柱：3/5；
背景色：rgba（2502502500.4）；
}

关于
如何
列表
联系我们

制作

宽度：100vh

到您的

.wrapper

和

.item-1

div可能就是您要找的。这样就不需要负边距、填充底部和对齐内容属性

希望有帮助

.wrapper{
/*利润上限：-25px*/
宽度：100vw；
高度：100vh；/*制造100vh*/
/*//边框：2px实心#ccc*/
显示：网格；
网格间距：3倍；
网格模板列：重复（490px）；
网格模板行：重复（4100px）；
证明内容：中心；
/*对齐内容：结束*/
/*垫底：10px*/
}
.盒子{
背景颜色：橙色；
颜色：#fff；
边界半径：5px；
填充：10px；
字体大小：150%；
文本对齐：居中；
}
.项目-1{
/*边缘顶部：50px*/
背景图像：url（../assets/imgs/placeholder.png）；
网格柱：1/5；
网格行：1/5；
高度：100vh；
}
.项目-2{
网格柱：1/3；
背景色：rgba（2502502500.1）；
}
.项目-3{
网格柱：3/5；
背景色：rgba（2502502500.4）；
}
.项目-4{
网格柱：1/3；
背景色：rgba（2502502500.4）；
}
.项目-5{
网格柱：3/5；
背景色：rgba（2502502500.4）；
}

关于
如何
列表
联系我们

将包装器网格模板行设置为自动100px 100px

html，
身体{
字体系列：Arial；
保证金：0；
填充：0；
}
.电网{
宽度：100vw；
高度：100vh；
背景：#333；
显示：网格；
网格模板行：自动100px 100px；
网格模板列：重复（490px）；
网格间距：5px；
证明内容：中心；
}
.grid*{
颜色：白色；
字体大小：120%；
背景：rgba（255，255，255，0.3）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.grid.grid-item-1{
网格柱：1/5；
网格行：1；
}
.grid.grid-item-2，
.grid.grid-item-3{
网格行：2；
}
.网格。网格项目4，
.grid.grid-item-5{
网格行：3；
}
.grid.grid-item-2，
.grid.grid-item-4{
网格柱：1/3；
}
.grid.grid-item-3，
.grid.grid-item-5{
网格柱：3/5；
}

关于
如何
列表
联系我们

将包装器网格模板行设置为自动100px 100px

html，
身体{
字体系列：Arial；
保证金：0；
填充：0；
}
.电网{
宽度：100vw；
高度：100vh；
背景：#333；
显示：网格；
网格模板行：自动100px 100px；
网格模板列：重复（490px）；
网格间距：5px；
证明内容：中心；
}
.grid*{
颜色：白色；
字体大小：120%；
背景：rgba（255，255，255，0.3）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.grid.grid-item-1{
网格柱：1/5；
网格行：1；
}
.grid.grid-item-2，
.grid.grid-item-3{
网格行：2；
}
.网格。网格项目4，
.grid.grid-item-5{
网格行：3；
}
.grid.grid-item-2，
.grid.grid-item-4{
网格柱：1/3；
}
.grid.grid-item-3，
.grid.grid-item-5{
网格柱：3/5；
}

关于
如何
列表
联系我们

请用您的代码重现问题。那将帮助我们帮助你。谢谢。请用你的代码重现这个问题。那将帮助我们帮助你。谢谢。这样做很好，我可以删除ind中所有的负边距和高度值