A question about CSS grid system

A grid system is just predefined CSS rules which makes it easy to layout elements on the page. Different grid systems may have a differing number of columns. Compare Twitter Bootstrap to Unsemantic for example, and you'll see that they try to solve the same problem (laying out elements) in a different way.

Normalize.css is made up of CSS rules which help create a more consistent look across various web browser software. Different browsers (IE, Chrome, Firefox, etc.) all may render a page slightly different depending on it's default values. Guil has a quick tip on this.

As @Sam's mentioned, in his excellent answer, the magic behind CSS grids is that someone can write a whole grid system.

You can then style your page, all you have to do to use this power is to apply the grid classes to your HTML.

Here's a simple demo to showcase the power of grids. I only defined background colors, all the other styling on the page in pulled in because of the classes I added to my HTML.

I wouldn't worry about it too much at this point. I've been working my way through the html/css videos as well. When you start doing the next section "Building a Responsive Website", it goes into it with a little more detail. Hopefully, when you get there you'll get a better idea about the grid.css.

Ok I think I understand what normalize.css is now.

I am still trying to get my head around the grids though. I really don't understand how grid.css is generated though.

@julia - How grids are created is a more advanced topic, in fact the last badge in the CSS Foundations course covers how grids are created.

+1 to what @Brandon said