Meet CSS Grid - a powerful CSS module!
So today I want to walk a bit through the basics of the CSS Grid system. It’s a layout system which is available in CSS. Because it is a 2-dimensional system you can handle both columns and rows at the same time. Maybe you heard already about flexbox, which is mostly a 1-dimensional system. The way the Grid Layout works is fairly simple. You apply CSS rules to your parent element (this element becomes the Grid container) and to your child element (which become your Grid Items later on).
So let’s say its a change in how we design grid-based user interfaces. Maybe you think about your workflow with tables or floats to lay out your web pages. But all these methods were essentially workarounds to the actual problem. So with Grid, you have the first CSS module to specifically solve layout problems, including some important things like vertical centering for example.
The Browser Support:
As of today, most browsers already shipped native, unprefixed support for Grid. Chrome (also Chrome Mobile on Android), Firefox, Safari (including on iOS), and Opera. Also Internet Explorer 10 and 11 support it, but only with an old implementation and an outdated syntax.
Let’s build!
To get started you need to define a container element in HTML as a grid item with display: grid inside of your style section. Afterwards, you set the column and row sizes with grid-template-column and grid-template-rows and then you place the child elements into the grid with grid-column-start and grid-column-end, plus grid-row-start and grid-row-end.
There are also shorthand versions for the commands above. You can set the start and the end from either column and rows with grid-column: 2 / 3;, or grid-row: 3 / 5;.
Note: Properties like display: inline-block, display: table-cell, or float have no effect on a grid item.
Templates:
So we can specify our start and end from our columns and rows but you also can use something called grid-template. This can be pretty useful if you want to define for example areas of your page. Let’s say you got some sort of a footer, a sidebar, and a content section. So you can divide your site with the grid layout and then template these columns and rows into areas. I created a little CodePen snippet for you to see the syntax of it. So you type in grid-template-areas and for each column, you set name in quotes (“sidebar-1 content footer”). But that’s not the whole story. Now you have to place your items in the different areas. The way you achieve this is no harder than something like this:
Now that I have hopefully given you a little insight into CSS Grid (Again: there are many more things you can do with CSS Grid!), I would like to recommend some good sources to learn and practice.
Sources:
https://developer.mozilla.org/en-US/docs/Glossary/Grid - MDN web docs
https://cssgrid.io/ - Wes Bos CSS Grid Tutorial
https://css-tricks.com/snippets/css/complete-guide-grid/- CSS-Tricks: A Complete Guide to Grid
https://gridbyexample.com/- Grid by Example
