Flex container with four columns on larger screens and three columns on smaller screens

Question

I'm trying to build a simple fluid grid, say 4 columns and 3 rows for screens above 728, and 3 columns and 4 rows for screens below 728px.

The boxes should have a gap between them, it doesn't matter how much, say 20px, or a percent..

[] [] [] [] []
[] [] [] [] []
[] [] [] [] []

I have a container with a padding of 20px:

html

<div id='container'>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
</div>

css:

#container{ padding:20px }

I'm confused on how flex works...can somebody help me?

Answer 1

Yeah, flex can take a little bit to get used to, but once you get it you're be harnessing a really powerful native layout system. Here is an updated jsbin for your answer that does what's you've asked for: http://jsbin.com/qocuwokeqa/edit?html,css,output

I'll explain a bit what I did:

#container {
  display: flex;
  flex-wrap: wrap;
}

This is simply creating a new flex formatting context, and telling it to allow there to be multiple flex lines (by default there is only 1).

.item {
  width: 23%;
  background: yellow;
  margin-bottom: 5px;
  margin-right: 5px;
  padding: 5px;
  flex: 1 1 auto;
}

The majority of this is just filler to make it more obvious where the items are and to give them spacing, the important one to note is the flex shorthand:

flex: 1 1 auto

I always, and so does the spec, suggest using the flex shorthand as it reset their respective longhands to give you the expected result. But by default it is 0 1 auto, this converts to:

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

Basically this telling the flex container which is laying out its children, how you want it to flex. If you turn on flex-grow it will take up the remaining free space (why I utilized min-width in the media query). Likewise, if your content begins to overflow it will shrink down the items to fit inside of the container.

So that's it, and honestly while Sunil has a point that this is to an extent recreating the wheel, you aren't having the overhead cost of a lib for something so trivial. And to Paulie_D's point it isn't necessarily a grid system, but neither are floats and until we have CSS Grid supported in all browsers flex is ok for component level flexible layout.

Answer 2

 #container { display: flex; /* 1 */ flex-wrap: wrap; /* 2 */ text-align: center; /* 3 */ } #container > div { flex: 0 0 calc(25% - 10px); /* 4 */ margin: 5px; } @media ( max-width: 728px ) { #container > div { flex-basis: calc(33% - 10px); /* 5 */ } } 

 <div id='container'> <div class='item'>[Name]</div> <div class='item'>[Name]</div> <div class='item'>[Name]</div> <div class='item'>[Name]</div> <div class='item'>[Name]</div> <div class='item'>[Name]</div> <div class='item'>[Name]</div> <div class='item'>[Name]</div> <div class='item'>[Name]</div> <div class='item'>[Name]</div> <div class='item'>[Name]</div> <div class='item'>[Name]</div> </div> 

jsFiddle

Notes:

1. Establish flex container
2. Enable wrapping ( initial setting is flex-wrap: nowrap )
3. Center the content of the flex items
4. This rule forces four items per row. It's equivalent to: flex-grow: 0 , flex-shrink: 0 , flex-basis: //25% less margin space// .
5. This rule forces three items per row.