10

I'm trying to create some CSS for a list of rectangles, with wrapping, that is responsive. The rectangles can contain a variable amount of text. The rectangles should have a minimum width of 300px, but can grow if there is more space available. It should work no matter the number of rectangles.

This is an image of what I want it to look like, in a wide desktop screen, a normal desktop screen and a phone, roughly:

Image showing target layout

(I realise that most phone and desktops are wider than that in pixels, but these numbers are easier to work with when it comes to SO's code snippets.)

I'm trying three techniques, and none of them do what I want:

1. Flexbox doesn't work:

Flexbox would seem ideal for this job. The trouble with the flexbox implementation is that I can't find a way to make sure the last rectangle stays the same size as the rest, while also allowing the rectangles to grow in very wide screens. Here's an image of the best flexbox result that I could come up with, which has the problem with the last line:

Here's the code of the flexbox implementation:

.container {
  display: flex;
  flex-wrap: wrap;
}
.rect {
  flex: 1 0 300px;
  height: 150px;
}
<div class="container">
  <div class="rect" style="background-color: #2F80ED"></div>
  <div class="rect" style="background-color: #2D9CDB"></div>
  <div class="rect" style="background-color: #56CCF2"></div>
  <div class="rect" style="background-color: #A6E2F5"></div>
  <div class="rect" style="background-color: #D6EBF2"></div>
</div>

2. float: left technique doesn't work:

Another responsive technique is to use floats, but I can't find a way to keep the rectangles the same width (with varying text content), while also allowing them to grow in the widest screens. Here's an image of what I ended up with:

enter image description here

Here's the code of the float: left implementation:

.container:after {
  content: "";
  clear: both;
}
.rect {
  float: left;
  min-width: 300px;
  height: 150px;
  overflow-y: hidden;
}
<div class="container">
  <div class="rect" style="background-color: #2F80ED">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</div>
  <div class="rect" style="background-color: #2D9CDB"></div>
  <div class="rect" style="background-color: #56CCF2">Lorem ipsum dolor sit amet, consectetur</div>
  <div class="rect" style="background-color: #A6E2F5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</div>
  <div class="rect" style="background-color: #D6EBF2"></div>
</div>

3. Why not media queries?

I'm looking for a solution that doesn't involve media queries, as media queries only let you put conditions on the screen width, and not on the .container width.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Flimm
  • 136,138
  • 45
  • 251
  • 267
  • 2
    A common problem with flex layout. Lots of similar questions. Here are a few: [**post 1**](http://stackoverflow.com/q/34928565/3597276), [**post 2**](http://stackoverflow.com/q/39747988/3597276) and [**post 3**](http://stackoverflow.com/q/40936543/3597276). – Michael Benjamin Jan 18 '17 at 17:04
  • Adding `max-width: 50%;` to the flex item could be a solution to the _same size_ issue. Would a script to take care of the desktop/mobile layout switch be an option? – Asons Jan 18 '17 at 17:04
  • 2
    P.S. Thanks for a very well-crafted question. – Michael Benjamin Jan 18 '17 at 17:04
  • @LGSon That's a great idea, although it causes the last item to be smaller than the others on mobile, and it doesn't work in cases where three items in a row is a possibility. – Flimm Jan 18 '17 at 17:13
  • Yes, and that's why you need the script (or media query) ... and you will need either – Asons Jan 18 '17 at 17:23
  • 1
    Get a time machine, travel to the future, and use [Flexbox 2](https://wiki.csswg.org/spec/css-flexbox-2) – Oriol Jan 18 '17 at 18:31
  • @Flimm: The only way I could work out is via JS. CSS is not helping in equalizing widths and and the same time grow that per space availability. If a little FOUC works for you, then you may want to have a look at this -- **https://jsfiddle.net/abhitalks/dzfm3797/** – Abhitalks Mar 03 '17 at 12:03

2 Answers2

1

You may keep using flex with an extra element via a pseudo with no height:

.container {
  display: flex;
  flex-wrap: wrap;
  background:gray;/*see me */
}
.container:after {
  content:'';
  flex: 1 0 300px;
  margin-bottom:auto;
  }
.rect {
  flex: 1 0 300px;
  height: 150px;
}
<div class="container">
  <div class="rect" style="background-color: #2F80ED"></div>
  <div class="rect" style="background-color: #2D9CDB"></div>
  <div class="rect" style="background-color: #56CCF2"></div>
  <div class="rect" style="background-color: #A6E2F5"></div>
  <div class="rect" style="background-color: #D6EBF2"></div>
</div>

:Note that is fine for five, for six boxes behavior is different.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • I just tried six boxes and it seemed to work, what is different? – Flimm Jan 18 '17 at 17:21
  • @Flimm with six boxes , when wrapping, last one width's doesn't always match to the others, but if that's not a trouble , then i guess it is okay :) – G-Cyrillus Jan 18 '17 at 17:59
1

I know you said that you were looking for an answer that didn't involve media-queries, but I believe it would be the best way to handle this situation.

If you set position: relative; on your .container all of it's children will base their width percentage off of .container's width. While technically you would still be basing your conditions off of the screen width you can still set the container width to any size you want and the .rect's will scale to that width, it would just depend on which of your media queries were active for what percentage your .rect's would be scaling to.

You could also set a max-width: for your .container in any of those media queries if you don't want it to grow past a certain size.

Here is a link to a pen which has the layout looking like your intended images above. http://codepen.io/bryanrunner/pen/BppzbE

.container {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  max-width: 1200px;
}
.rect {
  height: 150px;
}

@media (max-width: 1920px) {
  .rect {
    width: 20%;
  }
}

@media (max-width: 1000px) {
  .rect {
    width: 50%;
  }
}

@media (max-width: 600px) {
  .rect {
    width: 100%;
  }
}
Bryan Runner
  • 11
  • 4