Learning CSS Grid

Today I made my first layout with CSS Grid and I am SO sad I waited this long to start learning how to use it! Layout possiblities are endless and I’m excited about how creative CSS Grid empowers designers and developers to be.

CSS grid layout in the browser with visualizer tool in use

For my first layout, I followed along with MDN’s CSS Grid Basics Documentation, using CodePen and Firefox Developer Edition (the grid visualizer helped me truly understand the grid I made).

See the Pen First CSS Grid 🎉 by Jesse Crow (@crowjm) on CodePen.

If you have a supported browser, you can see the grid in the CodePen above. I commented everything in the CSS to use as reference in future grid layouts. I can’t wait to build more.