DEV Community

James Q Quick
James Q Quick

Posted on • Originally published at jamesqquick.com on

10 Examples with CSS Grid

#css #cssgrid #webdesign

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
  8. Responsive 2 Column with Footer Example 8
  9. Responsive 2 Column Grid with Footer (Grid Areas) Example 9
  10. Checkerboard Layout Example 10

Top comments (1)

Collapse
 
shimphillip profile image
Phillip Shim •

Neat. Thanks.

Read next

mroman7 profile image

Write less CSS using :is(), :where(), and :has() pseudo-classes

Roman -

rarestoma profile image

Best Tailwind CSS Template Builders

Toma Rares -

abhishekgurjar profile image

Building a Manage Landing Page using React

Abhishek Gurjar -

lollypopdesign profile image

🚀How to make responsive website to optimize user experience

Lollypop Design -