Full width list in CSS - html

Question

I'm trying to implement and new layout for my site. I am capable of implementing this using JS but I'm trying to use pure CSS.
And example would be http://tympanus.net/Development/GridLoadingEffects/
It starts out with 3 columns and when you resize the page smaller, the boxes resize until it gets small enough that it turns into two columns.
Similar to that I'm trying to get my horizontal list of square images to take full width of the page with the square's max-width being 300px. So for example: the page starts out with 5 columns, the width of the page starts shrinking, the width of the boxes start shrinking as well. It reaches a point where 4 300px boxes will be able to fit into the current width.
I've screwed around with and max-width and min-width, but I'm a CSS novice and I feel like I'm missing something. I've looked around and
Any ideas?

Answer 1

You can use Media Queries to set differnet css rules for different browser widths.
#media (min-width: 300px) and (max-width: 600px) {
someClass {
/* some rules for browser width between 300 and 600px */
}
}
More about Media Queries:
ss-tricks.com
MDN
selfhtml

Answer 2

Try setting the width as percents so it will be relative to the screen width.
Then use the screen width media query to set a different width for different screen sizes.
Good luck.

Answer 3

What you're basically talking about is a responsive grid layout system. IMHO the simplest way to do this in pure CSS if you float your DIVs and used fixed % sizes. Use Media break-points for each screen size range you want to support. You need to calculate all the gaps (gutter widths) as well. Also watch for rounding errors in some browsers, notably IE. You might need to use slightly less than 100% for maths because you want to ensure you don't end up 1px larger than 100%.
Here's an example with just one break-point that uses a 3 column layout by default and revers to a 2 column layout when the display size falls below 480px.
<style>
/* default */
.square {
background-color: orange;
width: 30%; /* 100/3 - (margin*2) */
padding-bottom: 30%; /* matching width makes it square */
margin: 1.5%; /* margin calculated as portion of overall 100% */
}
#media (max-width: 480px) {
.square{
/* overrides for smaller screens */
background-color: purple; /* show the breakpoint switch below 480px */
width: 47%; /* (100%/2) - (margin*2) */
padding-bottom: 47%;
margin:
}
}
</style>
<div>This layout will fit 3 squares wide for any screen width</div>
<div class="square">one</div>
<div class="square">two</div>
<div class="square">three</div>
And here's the fiddle.
Your media queries can get much more complex, but it's possible to support pretty much any device. Try and design for any screen size first and than mop up the edge cases.
This soon gets very complex to manage in CSS. You really want to think about a CSS pre-processor such as SASS or LESS. However, there are plenty of grid frameworks that support this, including Twitter's bootstrap and some great inspiration from fluid squares or my favourite for simplicity responsive.gs. You'll find that most of these use a grid of 12 or 24 columns, as they divide into more even sets of columns. For instance, 24 can shrink down to a screen consisting of 1, 2, 3, 4, 6, 8, 12 and 24 columns.