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 unalligned. I want to be able to customize square later to make them rectangle with certain measurements if needed. Prefer to utilize bootstrap also

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<div class="container">
  <div class="row">
    <div class="col"><img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image"></div>
    <div class="col"><img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7"></div>
    <div class="w-100"></div>
    <div class="col"><img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png"></div>
    <div class="col"><img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpgColumn"></div>
  </div>
</div>

score 1 · Answer 1 · answered Jun 28 '19 at 08:54

Use flex utilities & images from content of bootstrap Here are the reference links https://getbootstrap.com/docs/4.0/utilities/flex/ https://getbootstrap.com/docs/4.0/content/images/https://getbootstrap.com/docs/4.0/content/images/

I have used those and worked for me! Hope that'd help you also

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<div class="container">
  <div class="row">
    <div class="col-6 justify-content-center d-flex"><img class="img-thumbnail w-50" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image"></div>
    <div class="col-6 justify-content-center d-flex"><img class="img-thumbnail w-50" src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7"></div>
    
    <div class="col-6 justify-content-center d-flex"><img class="img-thumbnail w-50" src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png"></div>
    <div class="col-6 justify-content-center d-flex"><img class="img-thumbnail w-50" src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpgColumn"></div>
  </div>
</div>
</body>
</html>

thanks. how do I bring pictures closer together? right now they are too far apart — , Jun 28 '19 at 13:15
also,is there a way to specify the divider width between first column and second column once the pictures are fully expanded into the square? thanks — , Jun 28 '19 at 13:47
It became small because of the bootstrap class i have used w-50. You can remove that to make it's width 100%. And it's aligned centered that's why seems far. You can go through the link https://www.w3schools.com/css/css_grid.asp (css grid) to make them look how you want! Also if you want you can remove img-thumbnail class and check if that helps to get your desired layout — nazifa rashid, Jun 29 '19 at 09:59

Sai Manoj · Answer 2 · 2019-06-28T15:18:16.120

This can be done by setting background-imageto your div

.img-1 {
  background: url(https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7) no-repeat;
  background-size: cover;
  height: 300px;
  background-position:center
}

.img-2 {
  background: url(https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image) no-repeat;
  background-size: cover;
  height: 300px;
  background-position:center;
}

.img-3 {
  background: url(https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png) no-repeat;
  background-size:cover;
  height: 300px;
  background-position:center
}

.img-4 {
  background: url(https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpgColumn) no-repeat;
  background-size: cover;
  height: 300px;
  background-position:center
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<div class="container">
  <div class="row w-100">
    <div class="col img-2"></div>
    <div class="col img-1"></div>
        <div class="w-100"></div>
    <div class="col img-3"></div>
    <div class="col img-4"></div>
  </div>
</div>

If you are looking to make the image fit completely in the col you can use bootstrap classes w-100 and h-100 for your images

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<div class="container">
  <div class="row">
    <div class="col-6 p-0"><img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image" class="w-100 h-100"></div>
    <div class="col-6 p-0"><img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7" class="w-100 h-100"></div>
   
    <div class="col-6 p-0"><img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png" class="w-100 h-100"></div>
    <div class="col-6 p-0"><img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpgColumn" class="w-100 h-100"></div>
  </div>
</div>

what if I wanted 3 by 3. or 4 by 4, I may have to dynamically edit css? or is there easier way? thanks — , Jun 28 '19 at 13:03
You can do dynamically with JavaScript. As per your requirement. You need to append the div — Sai Manoj, Jun 28 '19 at 13:05
thanks! finally got it working, what's best practice? flex in bootstrap like nazifa answer or this? seems like flex is designed specifically for this, just trying to learn, feels like I should not inject websites in css. just formats — , Jun 28 '19 at 14:11
Bootstrap row uses flex by default. This is another way to make make your images to fit inside the column. It scales accordingly. Please accept the answer which you feel was helpful. Happy coding — Sai Manoj, Jun 28 '19 at 14:26
if you can remove the url from css and place in html,would happy to accept, thanks — , Jun 28 '19 at 14:39

score 0 · Answer 3 · edited Jun 28 '19 at 13:34

0

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.

edited Jun 28 '19 at 13:34

Sarah Allison

57
6

answered Jun 28 '19 at 08:26

Thomas Fortin

215
1
2
8

Hi first link does not work. second link does thanks – Jun 28 '19 at 12:57
1

finally got first link working, I want the pictures expanded into each box, equal length and height, right now picture in upper right of apples are smaller – Jun 28 '19 at 13:11
if you ever tried narrow the width of the browser window also, the pictures overlap and collide with each other. thanks – Jun 28 '19 at 13:35

HTML Create an Equal Size Square Grid Picture System

3 Answers3

Linked