1 line CSS Grid Framework

Tuesday, June 02, 2009 { 48 Comments }

.dp50 {width:50%; float:left; display: inline; *margin-right:-1px; }

Responses to “1 line CSS Grid Framework”

This is the challenge of writing entire CSS layout system with one line CSS class.I just wanted to prove how easy CSS can be, and with little imagination we can be build cool things.I started with the principle that every column can be, becoming half column or 50% column.So how can we build CSS Layout system with this principle?One column can become 2 (50%) column or 100% = 50% + 50%.So we can make 2,4,8,16, … layout system.Believe it or not we only needA little explanation:.dp50 means div 50 percentand we have floated left 50% column, display: inline; *margin-right:-1px; is fix for IE.So the result is:Download link The system can be made to work with any main default size(px, em, %) something like 950px or 550px or 90% or 50em. This system works, so you don’t have problem of multi browser compatibility.You can use the system in many different ways.Limits of this Framework?The main limit is that you can use only 1,2,4,8,16 columns system plus some combinations like (50% + 25% +25%). If you have something like 16 columns you will have many nested divs.: This is just technical demo and I don’t advise you to use it in production. If you need something very small you can use Malo , it is just 8 lines of code and uses the same naming system but has to offer much more.Building some "" css layout system(CSS Framework) is much more complex work. Usually you project your layout starting with the typography . On the base of the typography you make the grid and the gutter.I spend a lot of time searching for the best gutter or perfect web grid and searching the answer to the question " how we read ?".So I, this experiment has pureof building relatively complex css layout with minimum CSS code.