2

This should be straightforward so apologies if I've missed an easy solution. I want to use space-between so that four DIVs fit to a row on desktop and sit at the edges of the DIVs furthest to the left and furthest to the right touch the edges of the wrapper like this.

Image of result with space-between

I'm currently using space-between but it causes issues with any rows that aren't complete. Ideally the incomplete rows would be centered or to the left, so I tried space-evenly which would be fine if no other solution is possible but the DIVs don't reach the edges of their container.

Result using space-evenly

So I tried using start, which gets a result I'd also be happy with in that they're all to the left and add to the left each time a new DIV is added. This has the problem of leaving too much empty space on the left.

Result using start

I'd like to be able to use space-between to keep them at the edges while also being able to use start to keep them aligned left without the space on the right or space-evenlywith start which is less possible because of how space-evenly works meaning space-between but being able to set to the left is the best option and should get a result similar in layout to the first and third images without all of the space on the right.

Code is below, any help appreciated. Thanks in advance.

.wrap {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
}

.section {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.container {
  width: 22%;
  min-height: 150px;
  display: flex;
  margin: 5px;
  background-color: aqua;
  border-radius: 0;
}

@media only screen and (max-width: 500px) {
  .container {
    width: 100%
  }
}

.container-inner {
  display: inline-block;
  width: 100%;
  padding: 10px;
  text-align: left;
  overflow: hidden;
}

.container-image-wrap {
  display: block;
  width: 100%;
  margin: auto;
  padding-bottom: 10px;
}

.container-title-wrap {
  display: block;
  width: 100%;
  margin: auto;
  padding-bottom: 10px;
}

.container-image {
  display: block;
  width: 100%;
}
<div class="wrap">
  <div class="section">
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
  </div>
</div>

I've tried using an ::after which does pin to the left but doesn't align the last row with the ones above.

.section::after {
  content: "";
  flex: auto;
}

I've tried a hacky alternative adding an alignment-container div which does get the result desired but needs to be updated every time the grid content changes and it feels this isn't the best way to acheive this especially when window resizing and mobile are considered because there will be empty space.

.wrap {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
}

.section {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.container {
  width: 22%;
  min-height: 150px;
  display: flex;
  margin: 5px;
  background-color: aqua;
  border-radius: 0;
}

@media only screen and (max-width: 500px) {
  .container {
    width: 100%
  }
}

.container-inner {
  display: inline-block;
  width: 100%;
  padding: 10px;
  text-align: left;
  overflow: hidden;
}

.container-image-wrap {
  display: block;
  width: 100%;
  margin: auto;
  padding-bottom: 10px;
}

.container-title-wrap {
  display: block;
  width: 100%;
  margin: auto;
  padding-bottom: 10px;
}

.container-image {
  display: block;
  width: 100%;
}

.alignment-container {
  display: none;
  width: 22%;
  min-height: 150px;
  display: flex;
  margin: 5px;
  border-radius: 0;
}
<div class="wrap">
  <div class="section">
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="alignment-container"></div>
    <div class="alignment-container"></div>
  </div>
</div>

EDIT: The question linked as the same as this doesn't actually answer the question

learningtoanimate
  • 949
  • 6
  • 22
  • 1
    If you need to control the layout by row and column you should use `display: grid`. Flexbox is for one dimension. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout – morganney Dec 15 '21 at 14:07
  • I agree that at first glance this looks like a good use case for `grid`, but I do feel like even with `grid` your requirements might not be supported "out of the box", and might require some additional customization/finesse... – Alexander Nied Dec 15 '21 at 14:16
  • @morganney I've answered my own question with grid. Was hoping something could be done with flex but thanks for the pointer. – learningtoanimate Dec 15 '21 at 15:04
  • Got it @AlexanderNied thank you. – learningtoanimate Dec 15 '21 at 15:04

1 Answers1

1

Switched to using grid without many other changes. Margin removed to avoid the need for use of box-sizing and set inner width to constant 100% using a media query to change column width instead.

.wrap {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
}

.section {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(auto-fill, 22%);
    justify-content: space-between;
}

@media only screen and (max-width: 500px) {
.section {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, 100%);
    justify-content: space-between;
}
}

.container {
    width: 100%;
    min-height: 150px;
    display: flex;
    margin: 0;
    background-color: aqua;
    border-radius: 0;
}

.container-inner {
    display: inline-block;
    width: 100%;
    padding: 10px;
    text-align: left;
    overflow: hidden;
}

.container-image-wrap {
    display: block;
    width: 100%;
    margin: auto;
    padding-bottom: 10px;
}

.container-image {
    display: block;
    width: 100%;
}

.container-title-wrap {
    display: block;
    width: 100%;
    margin: auto;
    padding-bottom: 10px;
}
<div class="wrap">
  <div class="section">
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>

  </div>
</div>
learningtoanimate
  • 949
  • 6
  • 22