You don't have to use CSS Grid alone

One of the most common misconceptions about CSS Grid is that it’s all or nothing: that you have to use it for your entire layout, or not at all. This is absurd and completely untrue.

Take a look at my Portfolio page, for example. On bigger screens, I’m using a simple, two-column grid to display my projects:

.portfolio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
}

That’s currently the only part of my site that uses CSS Grid. You can drop it in as needed, much like bombing in and out of PHP. You don’t have to use it for your entire layout.

CSS Grid is not intended to “replace” other layout methods. It’s intended to work in harmony with them. Positioning, floats, Flexbox—and all the other powerful tools at our disposal—are sticking around. They’re not going anywhere. The key is to pick the right tool for the job.

This post is heavily inspired by Jen Simmons’ amazing video on Layout Land. Jen is one of my absolute favourite people in the industry. She has some fantastic videos on the channel, so check it out! 👇

Flexbox vs CSS Grid — Which Is Better?


If you have questions, feedback, or any other suggestions, please do email me. I'd love to hear from you!