如何删除网格上图像的多余空间

Question

我有一组图像要网格化。但是它们周围有额外的空间。我控制了填充和边距，垂直对齐更改和显示块选项，但它们似乎都不是解决方案。

这是我得到的图像

[![当前结果][1]][1]

.event-container{
margin-top: 10%;}
.event-img-wrapper{
display: grid;
grid-template-columns: 1fr 1fr 1fr;}
.box {
border-radius: 5px;}
.a {
grid-column: 1 / span 2;}
.b {
grid-column: 3 ;
grid-row: 1 / span 2;}
.c {
grid-column: 1 ;
grid-row: 2 ;}
.d {
grid-column: 2 ;
grid-row: 2 ;
width: 10%;}
.a img{
max-width: 600px;}
.b img{
max-width: 400px; }
.c img{
max-width: 300px;}
.d img{
max-width: 350px;}

<div class="container event-container">
<div class="col-12 col-md-12 col-sm-1">
<span class="services-title">
گروه بزرگ کاوه استیل </p>
</span>
</div>
<div class="event-img-wrapper">

<div class="box a">
<img src="../assets/images/آهن[e-mail]" align="left"/>
</div>
<div class="box b">
<img src="../assets/images/[e-mail]" align="left"/>
</div>
<div class="box c">
<img src="../assets/images/[e-mail]" align="left"/>
</div>
<div class="box d">
<img src="../assets/images/images (5)@2x.png" align="left"/>
</div>
</div>

Answer 1

希望，这对你有帮助

<style>
.event-img-wrapper {
display: grid;
grid-column-gap: 0;
grid-row-gap: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(8, 22vw);
}
.event-container{
margin-top: 10%;
}

.box {
border-radius: 5px;
overflow: hidden;
}
.a {
grid-column: 1;
}
.b {
grid-column: 2;
}
.c {
grid-column: 3;
grid-row: 1;
}
.d {
grid-column: 1;
width: 100%;
}
</style>

<div class="container event-container">
<div class="col-12 col-md-12 col-sm-1">
<span class="services-title">
گروه بزرگ کاوه استیل </p>
</span>
</div>
<div class="event-img-wrapper">

<div class="box a">
<img src="https://images.unsplash.com/photo-1452827073306-6e6e661baf57?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=967&q=80" align="left"/>
</div>
<div class="box b">
<img src="https://images.unsplash.com/photo-1597910037283-e728413e079c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80" align="left"/>
</div>
<div class="box c">
<img src="https://images.unsplash.com/photo-1526336179256-1347bdb255ee?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=634&q=80" align="left"/>
</div>
<div class="box d">
<img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" align="left"/>
</div>
</div>

Answer 2

由于grid-template-columns: 1fr 2fr 3fr;

Fr是一个分数单位。Fr单位是一个输入值，在调整网格内的间隙时自动计算布局划分。

运行代码片段并更改上述属性的值，以查看容器周围的不同空间量。

.event-container{
margin-top: 10%;}
.event-img-wrapper{
display: grid;
grid-template-columns: 1fr 2fr 3fr;}
.box {
border-radius: 5px;}
.a {
grid-column: 1;}
.b {
grid-column: 3 ;
grid-row: 1;}
.c {
grid-column: 1 ;
grid-row: 2 ;}
.d {
grid-column: 2 ;
grid-row: 2 ;}

<div class="container event-container">
<div class="col-12 col-md-12 col-sm-1">
<span class="services-title">
گروه بزرگ کاوه استیل </p>
</span>
</div>
<div class="event-img-wrapper">

<div class="box a">a
<img src="../assets/images/آهن[e-mail]" align="left"/>
</div>
<div class="box b">b
<img src="../assets/images/[e-mail]" align="left"/>
</div>
<div class="box c">c
<img src="../assets/images/[e-mail]" align="left"/>
</div>
<div class="box d">d
<img src="../assets/images/images (5)@2x.png" align="left"/>
</div>
</div>