Feb 24, 2017 CSS GRID LAYOUT
- CSS grid layout display contents in two dimension. Elements can be placed in grid like structure using CSS.
- CSS grid layout defines rows and columns.
- CSS grid layout can be changed based on media queries, making responsive design easier.
- CSS grid layout for overlapping items in grid. The order of items can be controlled using z-index.
An example of required layout for desktop,tablet and mobile devices:
The required layout for desktop and mobile devices can be easily achieved using grid css. Steps to achieve the layout will be:
- Declaring the grid
- Placing items
Declaring the grid:
We declare a grid with 3 rows and 3 columns. The first, third rows and columns are sized to fit the content. The second row and column takes up the remaining size.
We have placed grid items using the ‘grid-area’ shorthand. For example the side panel items is placed on grid area “sidePanel”