DEV Community

Cover image for CSS Grid Layout (responsive)
Tufail Shah
Tufail Shah

Posted on • Originally published at codepen.io

CSS Grid Layout (responsive)

In this post I'll be showing how we can use Css- GRID BOX to create web and mobile layout easily and efficiently.

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element’s children (which become Grid Items).
Try resizing the window to check for responsive effect.

Try resizing the window to check for responsive effect.
Check my Pen and give suggestion where and how we can achieve the required layout without pulling our hair.

Check my CodePen and follow me on Twitter, and encourage me to deliver more CSS, JS, HTML awesomeness, tips and tricks.

Discussion (0)