test

10 Examples with CSS Grid

I've decided to spend some dedicated time learning more about different technologies this year. My goal is to spend about 2 weeks on topics like Vue, Serverless, TypeScript, Headless CMS, etc. This way I can hold myself accountable. The first topic I dove into was CSS Grid.

I created this list of 10 examples to build with CSS Grid as practice for myself and others.

Learn how to build 10 examples with CSS Grid by following the video and the source code

In addition to the video, here are a few helpful resources as well as screenshots of the ten examples.

Resources

Here are the top resources that I used in my learning process!

The Examples

For each example, there is a set of starter files and finished files. Open the finished files to see what you need to build. Then, open up the starter files to see if you can complete the example on your own. If not, use the video for help.

Find the solutions in the video!

  1. Responsive 3 Column Grid Example 1
  2. Centered Content Example 2
  3. Reordered Content Example 3
  4. Responsive Navbar Example 4
  5. Asymetric Dashboard Example 5
  6. Responsive Card Gallery Example 6
  7. Asymetric Gallery Layout

Example 7

  1. Responsive 2 Column with Footer Example 8
  2. Responsive 2 Column Grid with Footer (Grid Areas) Example 9
  3. Checkerboard Layout Example 10