1/1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
(adj.) pertaining to a substance that easily changes its shape; capable of flowing.
(n.) a framework of spaced bars that are parallel to or cross each other; a grating.
We now live in a world where there are hundreds of different screen sizes. While consumers desire for a clean, user friendly interface is rapidly increasing, developer's ability to control and predict what screen size users will utilize is decreasing. Now more than ever it is essential for layouts to seamlessly transform and display on any device. Fluid grids give us the ability to expand and contract layouts flawlessly.
Fluid grids work off of percentage based layouts opposed to pixel based layouts. In fluid grids we define a maximum layout size for the design. Then the grid is divided into a specific number of columns. Each element is designed with proportional widths and heights instead of pixel based dimensions. So whenever the device or screen size is changed, elements will adjust their widths and heights by the specified proportions to its parent container.
In the example below, the minimum width is 300px and the maximum width is 1500px. 1-column gird is one column at 100%, 2-column grid is two columns each 50%, and 3-column grid is three columns each 33.3333%. Under the 3-column grid it is also split a 1/3 column and 2/3 column, this is done by giving the 1/2 column a percentage of 33.3333% and the 2/3 column a percentage of 66.6666%. The main idea is that all your columns always add up to 100%. The simplest way to assign your columns specific percentages is to create classes assigned percentage widths. These are the classes I used to create the grid below: .col1of1 {float:none;} .col1of2 {width:50%;} .col1of3 {width:33.33333%;} .col2of3 {width:66.66666%;}. These four classes allowed me to create a completely responsive grid layout.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre.consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.