CSSイメージグリッド - パディング

Question

を扱う私はこのグリッドを作成しました：最後.col-4ためのパディング付き

* { 
 
    box-sizing: border-box; 
 
    position: relative; 
 
} 
 

 
.grid>* { 
 
    float: left; 
 
    padding-right: 1em; 
 
} 
 

 
.grid>*:last-of-type { 
 
    padding-right: 0; 
 
} 
 

 
.grid:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.col-4 { 
 
    width: 33.3333333333%; 
 
} 
 

 
img { 
 
    display: block; 
 
    width: 100%; 
 
    border-radius: 5px; 
 
}

<div class="grid"> 
 
    <div class="col-4"> 
 
    <img src="https://i.stack.imgur.com/a6Ieo.jpg" alt=""> 
 
    </div> 
 
    <div class="col-4"> 
 
    <img src="https://i.stack.imgur.com/a6Ieo.jpg" alt=""> 
 
    </div> 
 
    <div class="col-4"> 
 
    <img src="https://i.stack.imgur.com/a6Ieo.jpg" alt=""> 
 
    </div> 
 
</div>

私は他の人よりも最後の画像は、より大きなすべての時間があります。私の質問は、他の画像と同じ高さに最後の画像を表示するには何ができますか？未知の高さの画像の場合は.col-4の場合はpadding-rightを保持しませんか？

Answer 1

を追加します。

body { 
 
    margin: 0 
 
} 
 

 
.grid { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100% 
 
} 
 

 
.col-4 { 
 
    flex: 0 calc((100%/3) - .67em); 
 
    margin-right: 1em 
 
} 
 

 
.col-4:last-of-type { 
 
    margin-right: 0 
 
} 
 

 
img { 
 
    display: block; 
 
    width: 100%; 
 
    border-radius: 5px; 
 
}

<div class="grid"> 
 
    <div class="col-4"> 
 
    <img src="https://i.stack.imgur.com/a6Ieo.jpg" alt=""> 
 
    </div> 
 
    <div class="col-4"> 
 
    <img src="https://i.stack.imgur.com/a6Ieo.jpg" alt=""> 
 
    </div> 
 
    <div class="col-4"> 
 
    <img src="https://i.stack.imgur.com/a6Ieo.jpg" alt=""> 
 
    </div> 
 
</div>

Answer 2

画像の幅から1emを削除して、他の部分のように縮尺を変えることができます。

* { 
 
    box-sizing: border-box; 
 
    position: relative; 
 
} 
 
.grid > * { 
 
    float: left; 
 
    padding-right: 1em; 
 
} 
 
.grid > *:last-of-type { 
 
    padding-right: 0; 
 
} 
 
.grid > *:last-of-type img { 
 
    width: calc(100% - 1em); 
 
} 
 
.grid:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.col-4 { 
 
    width: 33.3333333333%; 
 
} 
 

 
img { 
 
    display: block; 
 
    width: 100%; 
 
    border-radius: 5px; 
 
}

<div class="grid"> 
 
    <div class="col-4"> 
 
     <img src="https://i.stack.imgur.com/a6Ieo.jpg" alt=""> 
 
    </div> 
 
    <div class="col-4"> 
 
     <img src="https://i.stack.imgur.com/a6Ieo.jpg" alt="">  
 
    </div> 
 
    <div class="col-4"> 
 
     <img src="https://i.stack.imgur.com/a6Ieo.jpg" alt=""> 
 
    </div> 
 
</div>

Answer 3

私があなただったら、私はフレキシボックスを使用しますmargin: /*some value in px*/;