Traditional css layout techniques have limitations in regards to the huge growth in mobile and tablet sized screens. Therefore creating a responsive website layouts with the traditional layout techniques become more complex.
So it was a necessity to find new css layout techniques that will reduce this complexity. One of these techniques is the Grid.
Grid layout introduces the two-dimensional grid system. In other words the Grid layout system works with columns and rows as opposed to the one dimensional alternatives which let us work with either the columns or the rows.
This is really important because with this layout system we can build more complex layouts in a simple and clean way. To be more specific, we don’t have to include everything in the html markup as we would do with other tools like Bootstrap for example.
Now let’s see some practical tips to help us use Grid in our layouts.
Draw your grid first on paper.
Be cautious when using fractions.
Be cautious with whitespace.
Understand how explicit and implicit grids are formed.
Start with a simple grid.
Unfortunately there is one limitation to the current grid specification. This limitation is that subgrids are not yet widely available. According to the CSS specification, subgrid is defined as a nested grid that follows the same grid as the parent. Currently only Firefox supports these, and there is no current schedule for when other browsers will implement subgrids.
Having said that all major browsers support Grid and that means that you can use it right away to start creating awesome layouts. You can find out if your browser version supports it here.
After you’ve watched the video, download the initial code and try each CSS property shown in the video, play around with the values and pay close attention to how it transforms the layout.
Make sure you read about what each CSS property does and how it is supposed to be used:
Complete CSS Grid Garden. An awesome resource for learning the basics of css grid through 28 levels.
Check out the videos at Grid by Example. They are nice and short and cover all the major areas of CSS Grid.
Wes Bos has a CSS Grid course which goes really in depth on the subject.
Watch the following guest lecture by Tim Coomar on CSS Grid:
Duration: 110 minutes
In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.