CODEWITHSUNDEEP
htmlcss
Wobbles
Wobbles

Reputation: 3135

Is a CSS only container wrapper possible?

My goal is to create a content wrapper with each item being of equal height/width. That alone is easy enough and demonstrated below, but I would like the items (DIV's)to wrap to another line if they shrink below the min-width so it does not look compressed on mobile displays.

I imagine jQuery could handle this, but for simplicity and size I would like to see if there is a css only solution.

#wrapper {
    display: table;
    table-layout: fixed;
    
    width:90%;
    height:100px;
    background-color:Gray;
}
#wrapper div {
    display: table-cell;
    height:100px;
    min-width:200px;
}

#one {
    background-color:green
}
#two {
    background-color:blue
}
#three {
    background-color:red
}
<div id="wrapper">
    <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
    <div id="two">two two two two two two</div>
    <div id="three">three</div>
</div>

Some details as to the implementation:

This is for a icon grid type landing page, the number of items present are dynamic as is the dimensions of the page. Vertical scrolling due to items wrapping is fine but I do not wish to have any horizontal scrolling.

Upvotes: 2

Views: 87

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105883

From my comment

do not use the display:table properties, cells on a row do not wrap, flex does ;)

#wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  height: 100px;
  background-color: Gray;
}
#wrapper div {
  height: 100px;
  min-width: 200px;
  flex: 1;
}
#one {
  background-color: green
}
#two {
  background-color: blue
}
#three {
  background-color: red
}
<div id="wrapper">
  <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
  <div id="two">two two two two two two</div>
  <div id="three">three</div>
</div>

Upvotes: 4

Nenad Vracar
Nenad Vracar

Reputation: 122037

You can do this with Flexbox and flex-wrap: wrap, here is Fiddle

#wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  height: 100px;
  background-color: Gray;
}
#wrapper div {
  flex: 1;
  height: 100px;
  min-width: 200px;
}
#one {
  background-color: green
}
#two {
  background-color: blue
}
#three {
  background-color: red
}
<div id="wrapper">
  <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
  <div id="two">two two two two two two</div>
  <div id="three">three</div>
</div>

Upvotes: 4

Related Questions