Making a four square gallary of photos with CSS flexbox

user_12173449 0
Viewed 390

So I am newish to programming. I understand there are tutorials on flexbox and great resources of understanding flex but none that are straightforward in the sense of understanding how to limit the number of photos you want in a single column with flexbox. Below I am creating a 4 square photo of a surf fin just for practice. But it seems I am getting 3 photos on a line instead of 2 and 2.

I want it to look like this: enter image description here

But instead it look like this:

enter code here

I know there is no code directly stating to do so but here is the code and html I have WITHOUT FLEX:

    <div class="galary">
      <img src="./row-1-col-1.png" style="max-width: 350px; height: auto;" />
      <img src="./row-1-col-2.png" style="max-width: 350px; height: auto;" />
      <img src="./row-2-col-1.png" style="max-width: 350px; height: auto;" />
      <img src="./row-2-col-2.png" style="max-width: 350px; height: auto;" />
    </div>
  </body>

.galary {
  margin-top: 5vh;
  width: 100vw;
  text-align: center;
  background: #e8e8e8;
  padding: 2rem 0rem;
}
flexbox css html
4 Answers

I recommended you to use grid box rather than flex box because grid box align contents into columns and rows easily and here is an example for the grid box

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  width: 60%;
  height: 400px;
  background: darkcyan;
}

.img {
  width: 100%;
  height: 100%;
  border: 1px solid red;
}

.i2 {
  grid-column: 2/3;
}

.i3 {
  grid-column: 1/2;
  grid-row: 2/3;
}

.i4 {
  grid-column: 2/3;
  grid-row: 2/3;
}
<div class="container">
  <div class="img i1"><img src="x.jpg"></div>
  <div class="img i2"><img src="x.jpg"></div>
  <div class="img i3"><img src="x.jpg"></div>
  <div class="img i4"><img src="x.jpg"></div>
</div>

user_135368930

Here's how you can achieve the desired layout using flexbox

.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gallery img {
  margin: 0 3px 3px 0;
}
<div class="gallery">
  <div>
    <img src="https://picsum.photos/150" />
    <img src="https://picsum.photos/150" />
  </div>

  <div>
    <img src="https://picsum.photos/150" />
    <img src="https://picsum.photos/150" />
  </div>
</div>

Here's an alternative approach using CSS Grid.

:root {
  --imageWidth: 150px;
  --gridGap: 5px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--gridGap);
  justify-items: center;
  width: calc((2 * var(--imageWidth)) + (2 * var(--gridGap)));
  margin: 0 auto;
}
<div class="gallery">
  <img src="https://picsum.photos/150" />
  <img src="https://picsum.photos/150" />
  <img src="https://picsum.photos/150" />
  <img src="https://picsum.photos/150" />
</div>

For details on css grid, see A Complete Guide to Grid

user_60943480

How about this? You can change the / 2's inside the CSS calc()s function to the number of images you want in a row.
Note - calc is not fully supported in internet explorer. look here for more info about that.

.gallery {
  display: flex;
  width: 710px;
  max-width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}

img {
  margin-top: calc(10px / 2 * 2);
  width: calc(100% / 2 - 10px / 2);
}
<div class="container">
    <div class="gallery">
        <img src="https://picsum.photos/350/">
        <img src="https://picsum.photos/350/">
        <img src="https://picsum.photos/350/">
        <img src="https://picsum.photos/350/">
    </div>
</div>

user_63075400

Based on alot of the answers I looked into grid, It was as simple as this:

.gallery {
  display: grid;
  grid-template-rows: 50% 50%;
  text-align: center;
}

.gallery > div img {
  width: 350px;
  height: auto;
}

and the html:

  <div class="gallery">
      <div>
        <img src="./row-1-col-1.png" />
        <img src="./row-1-col-2.png" />
      </div>
      <div>
          <img src="./row-2-col-1.png" />
          <img src="./row-2-col-2.png" />
      </div>
      </div>
    </div>

For those beginning like me, flexbox is better used for a single column on a row but Grid is better when you want to use both columns and row (2 dimensional.)

user_121734490
Related