Quiero hacer un bloque que contenga 4 imagenes ordenadas en linea y columna de 2 x 2 Deberia verse sin margenes interior entre las imagenes. La funcionalidad seria la de un boton grande con 4 opciones que al pulsar fuera a un link distinto cada uno.
Usando "bootstrap" consigo hacer un bloque de 4 x 1
<div class="row">
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
<div class="view overlay">
<div>
<img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
<img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
</div>
<div>
<img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
<img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
</div>
</div>
</div>
</div>
Si lo hago de esta manera coloco un bloque de 2 x 2 pero me sale separado en vertical y si la pantalla es pequeña el responsive me lo deja en 4 x 1
<div class="row">
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
<div class="view overlay">
<img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
<img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
<div class="view overlay">
<img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
<img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
</div>
</div>
</div>