HTML Create an Equal Size Square Grid Picture System

Question

How do I create a picture grid system with equal size squares vertically and horizontally alligned? This is a 2 by 2 picture system below. For some reason the images are unallig

Answer 1

For doing that, you can use the flexbox.

It is very simple to use with Bootstrap, follow the reworked example I made for you in the following CodePen on this link. If you don't want to wrap images 2 by 2 but doing it automatically, you can do it this way too.

Thanks to the col-6, it's going to automatically take 6 columns of the 12 of Bootstrap. Of course you can change it following the screen size because of the classes like col-{breakpoint}-{columns}.

If you have any question, do not hesitate.

---

Good luck.