Image Grid - Different Heights

Question

I'm working on a layout for a responsive grid with icons that have the same width but different heights.

Here is a mock up in JS Fiddle:

https://jsfiddle.net/amykirst/htqxttan/3/

HTML:

<div class="expertise">
    <div class="icon-wrapper">
        <div class="img"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img" style="height: 60px"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img" style="height: 50px"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img" style="height: 70px"></div>
        <p>Label</p>
    </div>
</div>

CSS:

* {
  box-sizing: border-box;
}

body {
  padding: 1rem;
}

.icon-wrapper .img {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  background-color: red;
}


.icon-wrapper p {
  text-align: center;
}

.expertise {
text-align: justify;
}

.expertise:after {
  content: " ";
  display: inline-block;
  width: 100%;
}

.icon-wrapper {
    margin: 0 auto;
    background-color: blue;
    display: inline-block;
     vertical-align: bottom;
  margin-top: 1rem;
}

The red boxes are placeholders for images and will be image tags in the real thing.

I'm having a difficult time making the images justify so that the outer images touch the edge of the page and there is an equal distance between the images.

When I add empty gap elements, as recommended in this tutorial, it no longer spans the width of the page when the page is full width. The gap elements are there taking up space. And at some smaller screen sizes, the space between the images on the top row is different than the space on the bottom row.

The width of the images will always be the same - the space between them should change based on the screen size.

When there are an unequal number of images in the bottom row, it should justify left.

Here is an example of what I'm trying to achieve.

have you seen my comment to discuss your comment? (you need to click the link in the comment) — dippas, Nov 22 '15 at 01:21

score 0 · Answer 1 · answered Nov 21 '15 at 02:06

0

You can use text-align justify

body {
  padding: 0;
  margin: 0;
  text-align: justify;
}

https://jsfiddle.net/htqxttan/8/

answered Nov 21 '15 at 02:06

William

1
1

Your example doesn't fix the problem of the unequal gutters. If you make the screen smaller, the second row has an uneven number of images, that have different margins between them. – amylynn83 Nov 21 '15 at 02:08

Rene van der Lende · Accepted Answer · 2015-11-21T03:34:52.927

This seems to be a perfect situation for using a flexbox layout. Check the snippet for comments and let me know if this is what you meant.

There are several options for .expertise { justify-content: xxx }, flex-start, flex-end, center, space-between and space-around.

Fiddle

.expertise {
    display: flex;      /* make element a flexible layout container */
    flex-wrap: wrap;    /* a row of N columns, wrapping within frame*/
    justify-content: space-between; /* evenly space elements, outer to the edges */
    align-items: flex-end; /* bottom align elements */
    background-color: silver;
}

.icon-wrapper {
    background-color: blue;
    max-width: 100%;    /* don't make this too small, leave as is or make it a multiple of min-width */
    max-height: 100%;   /* ditto */
    min-height: auto;   /* override if you want to set minimum; interacts with flex-basis! */
    overflow: hidden;   /* Chop off outside content */
    margin: 8px         /* some space between the boxes (when not using auto spacing) */
}
.icon-wrapper p {
  text-align: center;
}

.icon-wrapper .img {
    display: block;     /* default inline, block removes bottom space */
    width: 4rem;
    height: 4rem;
    background-color: red;
}

<div class="expertise">
    <div class="icon-wrapper">
        <div class="img"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img" style="height: 60px"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img" style="height: 50px"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img" style="height: 70px"></div>
        <p>Label</p>
    </div>
</div>

This is close, but when the screen gets smaller, there is a point where there are only two boxes on the second row, and the last box is against the right edge instead of left aligned. How do I get it to move over and have the extra white space on the right? — amylynn83, Nov 22 '15 at 01:05
That would be `justify-content: flex-start` (the default), but that will probably mess up rule 1) flex-to-sides — Rene van der Lende, Nov 22 '15 at 01:17
I ended up using flexbox but added some extra divs to make the last row justify to the left at different screen widths. — amylynn83, Nov 24 '15 at 15:22
FYI you may want to have a look at my anwser for [Center align container and...](http://stackoverflow.com/questions/33192745/center-align-container-and-left-align-child-elements/33313718#33313718). That could well be a good alternative. Let me know as I am working on an extensive (for codepen) version right now. — Rene van der Lende, Nov 24 '15 at 15:34

score 0 · Answer 3 · answered Nov 21 '15 at 03:42

Here is an update for you styles to get your job done:

.expertise {
    text-align:justify;
    text-justify:newspaper;
    text-align-last:justify;
}

Also, you can set:

.expertise {
    font-size:0;
}

and:

.icon-wrapper {
    font-size: YOURFONTSIZE;
}

to eliminate any extra gaps in layout. Here is an updated example on JSfiddle

Image Grid - Different Heights

3 Answers3