CSS grid layout or CSS grid is a technique in CSS that allows web developers to create complex responsive web design layouts more easily and consistently across browsers. [1] There-have-been other methods used webpage layout Previously Including tables , the box model , and CSS flex box . It is currently a W3C Candidate Recommendation . [2]

Motivation

CSS grid layout can create more asymmetrical than previous grid and layout options like CSS floats . It also allows for more standardized code than works across browsers. This is in contrast to relying on specific hacks or complicated workarounds. [2]

One issue with using floats in CSS is if it is possible to get the most out of the page. This is due to the different heights for layout elements. [2]

Browser support

As of October 2017, Chrome, Firefox, Safari, Edge and all CSS grid support without vendor prefixes. [3] [4] [5] web developers targeting older browsers can please use Modernizr 3.5.0 to detect and gracefully degrade the webpage as needed. [6]

Utilization in frameworks

There are no current web frameworks that imply CSS grid in contrast with CSS flex box which is used in frameworks such as Bootstrap 4 and Foundation 6. [7]

References

  1. Jump up^ “CSS Grid – Be there and be square” . Google . Retrieved 6 October 2017 .
  2. ^ Jump up to:c “CSS Grid Layout Module Level 1” . W3C . May 9, 2017 . Retrieved 7 October 2017 .
  3. Jump up^ Anderson, Kareem (13 September 2017). “Microsoft’s newest browser gets a big boost with EdgeHTML 16” . Retrieved 7 October 2017 .
  4. Jump up^ Protalinski, Emil (9 March 2017). “Chrome 57 arrives with CSS Grid Layout and API improvements | VentureBeat” . VentureBeat . Retrieved 7 October 2017 .
  5. Jump up^ “CSS Grid Layout” . Can I use . Retrieved 7 October 2017 .
  6. Jump up^ Ates, Faruk. “Modernizr 3.5.0” .
  7. Jump up^ “Flexbox grids and frameworks” .