CSS grid layout
This article or section may be written in a style that is too abstract to be readily understandable by general audiences. (October 2017)
|Cascading Style Sheets|
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. There have been other webpage layout methods used previously including tables, the box model, and CSS flex box. It is currently a W3C Candidate Recommendation despite already being adopted by most major browsers.
CSS grid can create more asymmetrical layouts than the previous grid and layout options like CSS floats. It also allows for more standardized code that works across browsers. This is in contrast to relying on specific browser hacks or complicated workarounds.
One issue with using floats in CSS is if content gets added to one portion of the page it could disrupt the flow of the page and break the layout. This is due to the varying heights for layout elements. Though CSS flex box supports flexible layouts and provides the flexibility of creating complex layouts, it fails when the need for creating responsive layouts in 2-dimensional space arises. That is where CSS grid layout shines.
As of October 2017, Chrome, Firefox, Safari, and Edge all support CSS grid without vendor prefixes. IE 10 and 11 support CSS grid but with an outdated specification. On mobile, all modern browsers support CSS grid except for Opera mini and UC browser. Web developers targeting older browsers can utilize Modernizr 3.5.0 to detect and gracefully degrade the webpage as needed. 
Utilization in frameworks
- "CSS Grid – Table layout is back. Be there and be square". Google. Retrieved 6 October 2017.
- "CSS Grid Layout Module Level 1". W3C. 9 May 2017. Retrieved 7 October 2017.
- "Introduction to CSS Grid Layout". WisdomGeek. Retrieved 24 December 2017.
- Anderson, Kareem (13 September 2017). "Microsoft's newest browser gets a significant boost with EdgeHTML 16". Retrieved 7 October 2017.
- Protalinski, Emil (9 March 2017). "Chrome 57 arrives with CSS Grid Layout and API improvements | VentureBeat". VentureBeat. Retrieved 7 October 2017.
- "CSS Grid Layout". Can I Use. Retrieved 7 October 2017.
- Ates, Faruk. "Modernizr 3.5.0".
- "Flexbox grids and frameworks".