DEV Community

loading...
Cover image for CSS Grid Layout (responsive)

CSS Grid Layout (responsive)

tufail profile image Tufail Shah Originally published at codepen.io ・1 min read

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)

pic
Editor guide