CSS grid layout
CSS Grid Layout 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 webpage layout methods used previously including tables, the box model, and CSS Flexbox. It is currently a W3C Candidate Recommendation despite already being adopted by most major browsers. [2]
Advantages
CSS Grid can create more asymmetrical layouts than 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.
Browser Support
As of October 2017, Chrome, Firefox, Safari, and Edge all support CSS grid without vendor prefixes. [3][4][5] Web developers targeting older browsers can utilize Modernizr 3.5.0 to detect and gracefully degrade the webpage as needed. [6]
Utilization in Frameworks
There are no current web frameworks that incorporate CSS Grid in contrast with Flexbox which is used in frameworks such as Bootstrap 4 and Foundation 6. [7]
External links
References
- ^ "CSS Grid – Table layout is back. Be there and be square". Google. Retrieved 6 October 2017.
- ^ "CSS Grid Layout Module Level 1".
- ^ Anderson, Kareem. "Microsoft's newest browser gets a significant boost with EdgeHTML 16".
- ^ Protalinski, Emil. "Chrome 57 arrives with CSS Grid Layout and API improvements | VentureBeat". venturebeat.com.
- ^ "Can I Use - CSS Grid".
- ^ Ates, Faruk. "Modernizr 3.5.0".
- ^ "Flexbox grids and frameworks".
 | This article, CSS grid layout, has recently been created via the Articles for creation process. Please check to see if the reviewer has accidentally left this template after accepting the draft and take appropriate action as necessary.
Reviewer tools: Inform author |