CSS Grid

CSS Grid allows us to make 2 dimensional layouts in CSS.

For my project I decided to showcase some of the features of grid by making a quick mockup of a music player.

Feature 1

Fractional Units

The Fractional unit is a new unit introduced alongside grid, its allows you to split the width of a container without having to deal with percentages. In my project I used fractional units to make a sidebar and main content container.

Feature 2

Grid Template Area

CSS Grid also allows you to make names areas that allows you to map out your design very simply. In my CSS file you can see how I utilized to very easily layout my website.

Feature 3

Combining Grid and Flexbox

It is very easy to use grid and flexbox to help create interesting layouts. I used grid to create the sidebar and flexbox to center align the icons easily. A common misconception is that you have to use one or the other but using both allows you to easily make great layouts.

Browser Support

Support for grid has been steadily growing, with Chrome having the most versions having support. All newest versions of web browsers support Grid but legacy support is not very good.

Use

CSS grid is fantastic for making 2 dimensional layouts. It is very versatile and has many uses. Companies can quickly mock-up applications concepts like I did or create the layout easily for web applications.