edit-article

Article Description: CSS-GUIDE-grid - 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...

Chapter ID/Name:

Status: Write Writing Written

Add Photo:

Owner ID:

Content: use HTML Edit Content <h1 style="text-align: center;">GUIDE - grid</h1> <h2>[WHAT]</h2> <ol> <li>[] 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 <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">flexbox</a> 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).&hellip;</li> </ol> <h2>[WHY]</h2> <ol> <li>[]&nbsp;The main idea behind the grid layout sytem is to provide 2 dimensional layout positioning VS</li> </ol> <h2>[WHERE]</h2> <ol> <li>[] <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank">https://css-tricks.com/snippets/css/complete-guide-grid/</a></li> </ol> <h2>[WHEN]</h2> <ol> <li>[] designing web page/site layouts</li> </ol> <h2>[EXAMPLE]</h2> <ol> <li>[] <a href="https://codepen.io/anon/pen/vZegMK?editors=1100" target="_blank"><br /></a></li> </ol> <h2>[HOW-TO]</h2> <ol> <li>[]</li> </ol> <h2>[REFERENCE]</h2> <ol> <li>]</li> </ol> <h1 style="text-align: center;">&nbsp;</h1>