|
GridLayoutModule
Notes on the Grid Layout Module.
Grid Layout ModuleLocation/stylesheets/modules/grid-layout.css Source Codehttp://code.google.com/p/sparkl/source/browse/trunk/stylesheets/modules/grid-layout.css SummaryThe Grid Layout Module allows you to create grid layouts by splitting a containing element into 2,3,4,5,6 or 8 columns. Elements inside the grid container can be made to span 1 column or more. This allows you to give your page more visual consistency. The grids provide a flexible layout that will flex to fit with changes in the browser window size and text size. A web search for grid designs will provide more information. HTML Design Pattern<div class="three-col grid"> <div> <h4>one</h4> <p> This is inside a grid3. This is inside a grid3. This is inside a grid3. This is inside a grid3. This is inside a grid3. This is inside a grid3. </p> </div> <div> <h4>two</h4> <p> This is inside a grid3. This is inside a grid3. This is inside a grid3. This is inside a grid3. This is inside a grid3. This is inside a grid3. </p> </div> <div> <h4>three</h4> <p> This is inside a grid3. This is inside a grid3. This is inside a grid3. This is inside a grid3. This is inside a grid3. This is inside a grid3. </p> </div> </div> DescriptionIf you want to split any element into a grid of columns, it is a simple as adding a class to that element of 'somenumber-col grid', where somenumber refers to how many columns you want in the grid (for example, a class of 'three-col grid' will split a container into 3 columns). Every child element of a grid is divided evenly with a 2% right margin on each side. If you want an element to be wider then use a class of 'span' followed by the number of divisions you want it to span (for example, a class of 'span2' will make an element span 2 columns). Elastic and fixed width grids can be created by setting a specific width on the element that contains the grid. Why It's BulletproofThis module will produce flexible grid layouts that will allow content to flex with changes in the browser window size and also if the text is resized. How it worksAll child elements of the containing element are floated. This will make them line up next to each other.The element that has the grid class is given CSS property of overflow: hidden;. This makes it contain the floats and automatically clears them, avoiding the need for any awkward empty .clearfix divs. IE FixesInternet Explorer seems to round percentage widths incorrectly, so a slightly smaller margin of 1.8% is used for IE7 and below in the ie_only.css stylesheet. This sometimes causes the right most margin to be too big at some window sizes. IssuesGrids cannot be nested, as the rules start to override each other, so you can't put one grid inside another grid. The best thing to do would be to use a grid with more columns and use spans more. Some grids seem to wrap in Internet Explorer at certain window sizes. Some very small gaps occasionally appear on the right hand side for certain window sizes in Internet Explorer (usually version 6 or below). A solution is to make the background of the container the same as the child elements - this will mean the gap is not noticeable. The divisions cannot be made the same height, as in a table layout. This could be fixed by using the display: table CSS property, although support for this property is patchy and it is not due to be supported in Internet Explorer until version 8. Another fix is to give the same background colour to the columns as the container, so you can't actually see the individual columns. Javascript can also be used to make all columns the same height as the largest column once the page has loaded (this gives a slight delay sometimes and obviously doesn't work for users without Javascript). Things get tricky with the gutters when a specific width is applied to the grid element. This can happen if you combine a grid layout with the advanced-layout module and try to give either primaryConent, secondaryContent or tertiaryContent divs a grid layout. This is because the left most gutter is actually padding on the grid and relies on the width being 'auto'. There are workarounds for this including
Further Readinghttp://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/ http://www.subtraction.com/archives/2004/1231_grid_computi.php http://www.simplebits.com/notebook/2008/01/31/gridlasticness.html http://www.mezzoblue.com/archives/2005/05/13/columns_grid/index.php http://www.markboulton.co.uk/articles/detail/feeling_your_way_around_grids/ Other Modules
|
► Sign in to add a comment
