CODEWITHSUNDEEP
javascripthtmlcss
Mia
Mia

Reputation: 6531

Fit content (100%) depending on number of items in a row

I've been struggling to make an image gallery which auto-fits the content (width: 100%) depending on the number of items it contains.

Here is what I mean: Let's assume that this is my gallery: http://codepen.io/anon/pen/eNMOEz

.item {
  width: 75px;
  height: 75px;
  border-width: 1px;
  float: left;
}

As you scale the browser, since items are set to float: left the number of items increase per row.

However then the width of the gallery has gap at the right side of the page since each .item is defined to be exactly 75px.

What I wanted would look closer to this: http://codepen.io/anon/pen/xGWKaP

.item {
  width: 5%;
  float: left;
}

As you can see items per row fit exactly to the page width as item width is defined as percentage instead of a fixed px value. However there are two issues with this one as well, which I want to solve:

  1. Item number per row is fixed (20 as in the example). I want item number to be like a "Math.floor" value of how many can fit. For instance if the item width is set to be 75 pixels and if the page is 800 pixels width, then item count should be 10 (as 750 pixels is the max. that can be covered by 800 pixels width.) So it should be width: 10%

  2. There is a gap at the bottom of each row, I have no idea what causes this.

I'm primarily looking for a css-only solution - but a clever and non glitching js is accepted as well.

This is a long post, I hope everything is clear.

Upvotes: 2

Views: 458

Answers (3)

Jjsg08
Jjsg08

Reputation: 124

Try it:

.item {
    width: 10vw;
    height: 10vw;
    border-width: 1px;
    float: left;
}

or it (if the scrollbar is present):

body {
  margin: 0;
  padding: 0;
  font-size:0px;
}
.item {
  width: 5%;
  height: auto;
  /*border-width: 1px;*/
  float: left;
}
img {
  width: 100%;
}

Try this instead, if you desire show all images in a row (really i not understand completely because the english isn't my native language, you should note this for my bad writting, and explain a bit more ¬¬)

html,body {
  margin: 0;
  padding: 0;
  font-size:0px;
  width:100%;
}
#wrap {
  display:inline-table;
  overflow:hidden;
  width:100%;
  height:auto;
}
.item {
  display:table-cell;
  height:10px;
}
img {
  width: 100%;
}

Upvotes: -1

Gediminas Leikus
Gediminas Leikus

Reputation: 68

You can view a potential answer in: Flex - controlling the last row

As for your second question:

2) There is a gap at the bottom of each row, I have no idea what causes this.

This is caused by an image inside a block. If you add 'vertical-align' top/middle/bottom, then the gap disappears.

Upvotes: 2

Carl K
Carl K

Reputation: 984

A Flexbox will be of better use to you. It will allow you to made the adjustments you requested in your post.

See a great tutorial here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Related Questions