This is my personal coded column system, an alternative to the huge file that is incorporated from other frameworks like Bootstrap

Practical examples on how to use flexible COLUMNS

Columns (width margins)

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Columns (without margins)

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

No equal columns + padding

Lorem ipsum dolor sit amet, in at morbi in lacus cursus a, consequat magna, neque donec, sit at sit, morbi elit justo volutpat sodales. Lorem ullamcorper volutpat nulla in, quas sed tempor arcu nam consequat, suscipit sit non massa suscipit a eleifend, interdum lacinia morbi ligula etiam, sagittis quis maecenas non donec. Auctor luctus et at nec ut et, cum lacinia aliquam. Leo tortor libero vehicula vitae, montes libero, sed sed quis facilisis massa, a congue lacinia luctus pretium erat tellus, autem felis massa mauris mauris hendrerit luctus. Nisl nulla, molestie nisl, vitae praesent a ea in accumsan. Nam placerat sem pharetra sed quam lacus, fames nullam, sociis vestibulum donec congue et vestibulum.
Nisl nulla, molestie nisl, vitae praesent a ea in accumsan. Nam placerat sem pharetra sed quam lacus, fames nullam, sociis vestibulum donec congue et vestibulum.
Sit ducimus, id sagittis sed, fermentum ligula, porta necessitatibus rhoncus praesent morbi mauris, sed mi suscipit aliquet non sed. Vivamus montes in integer dui nec quis.

NOTE: No equal columns require floating elements, the border need to match the background color to create the illusion of margins

Equal columns + padding

Lorem ipsum dolor sit amet, in at morbi in lacus cursus a, consequat magna, neque donec, sit at sit, morbi elit justo volutpat sodales. Lorem ullamcorper volutpat nulla in, quas sed tempor arcu nam consequat, suscipit sit non massa suscipit a eleifend, interdum lacinia morbi ligula etiam, sagittis quis maecenas non donec. Auctor luctus et at nec ut et, cum lacinia aliquam. Leo tortor libero vehicula vitae, montes libero, sed sed quis facilisis massa, a congue lacinia luctus pretium erat tellus, autem felis massa mauris mauris hendrerit luctus. Nisl nulla, molestie nisl, vitae praesent a ea in accumsan. Nam placerat sem pharetra sed quam lacus, fames nullam, sociis vestibulum donec congue et vestibulum.
Nisl nulla, molestie nisl, vitae praesent a ea in accumsan. Nam placerat sem pharetra sed quam lacus, fames nullam, sociis vestibulum donec congue et vestibulum.
Sit ducimus, id sagittis sed, fermentum ligula, porta necessitatibus rhoncus praesent morbi mauris, sed mi suscipit aliquet non sed. Vivamus montes in integer dui nec quis.

NOTE: Not able to use "margins because I am using "css display:table", the border need to match the background color to create the illusion of margins

Real column example

10 principles on design by Dieter Rams

Good design is innovative

The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.

Good design makes a product useful

A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasises the usefulness of a product whilst disregarding anything that could possibly detract from it.

Good design is aesthetic

The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.

Good design makes a product understandable

It clarifies the product's structure. Better still, it can make the product talk. At best, it is self-explanatory.

Good design is unobtrusive

Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user's self-expression.

Dieter Rams
Dieter rams, and his designed products.

Good design is honest

It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.

Good design is long-lasting

It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today's throwaway society.

Good design is thorough down to the last detail

Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.

Good design is environmentally-friendly

Design makes an important contribution to the preservation of the environment. It conserves resources and minimises physical and visual pollution throughout the lifecycle of the product.

Good design is as little design as possible

Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.

NOTE: For adaptive layouts in responsive web design it is better to use ".no-eq" ("no equal height" adds floating element). You add background colour to the parent container and give transparent colour to borders that act as margins.