Look maa no FLOATS!!

Made with ♥ cssgrids

Browse the below examples to see the magic of css-grids.

EXAMPLE ONE - Without Float placetment

This example is GRID based layout and responsive too. Without using single FLOAT and Media query.

EXAMPLE TWO - Grid-areas

In this example, I have shown how you can use the css-grids to create the webpage layout without using floats. In this I used grid-area and flexbox.

EXAMPLE THREE - Nested Grids and Line Grid

In this example, I used nested grids as well as line-based placement.

EXAMPLE TWO - Responsive Media Query

In this example, I used Media Query to control the layout on mobile view with grid-area

CSS Grids is the new specification from W3C. CSS Grids help in defining the layout of your webpage without using FLOATS. CSS Grids let you define your webpage in Rows and Columns. As well as it has lot of new properties which let you control the flowof the content too.