css3 - CSS Resizing based on key variables -

I have created a dynamic size grid layout that can be resolved with resolution of any size (phone, tablet, desktop) and Being able to handle resizing, being all pixel-lower (sorry, I'm an OCD - and I say "pass" because my math is still broken and you have two equal sizes inside a strange size container without padding Can not fit the elements of 1px on one side)

Anyway, there is a link to the bottom I have hacked together with Javascript. This is an example that I am trying to pull

There is some ugly manual javascript that has been placed in the corner, but still is ugly javascript which can be used in all genres Counts.

So my question ... can I link it with CSS? Or too much CSS and much less javascript? And this means that there are dynamic shaped cells based on the width of the screen?

Here are the business rules:

• Maximum cell width: 320px
• Minimum # cells per line: 2 < Ul>
• This can be impossible with CSS, so I'll be fine with the minimum cell for Chrome on the width of the minimum cell: 178
• Cell range: 5px with 2px framework
• Visible margin between cells: 3px (margin is actually 5px but outline bleeds out)

  This example , I'm highlighting cells every time resizing, but my angular version, I believe that is updated only styles. He said, maybe I can re-create a table on the shape, but I have to calculate only the cell width based on the width of the document, and well ... I would not be thrilled to use a table = [

  - wide rant

  Media queries

  You can get close to a CSS-only solution.

  The main concept here is using different layout grids based on browser width, which can vary the number of columns.

  Media queries are the natural CSS method of changing layout based on browser width. And they do not need javascript. If you use a set of media queries - each one targets different browser widths - to control which layout grid is used, then all grids should be responsive - in each column Content width to fill percentage width, and column width.

  Responsive design

  The question is: Is it possible to automatically spread each piece of content to fill the column, using CSS alone Tax? It depends on the type of content, how it spreads when the behavior occurs, and if there is a place to compromise with graphic design.

  Typically, the graphic design for a responsive website should suit the boundaries of responsive design (which is possible with graphic designers and which is not a big idea). But ... which can not be done automatically, can be done using Javascript.

  The relevant search terms: Responsive design , adaptive content , P> Note: In this case "column" can mean the percentage width used for initial containers for each piece of material in general. It does not mean "physical" columns in the traditional sense.