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.
My old portfolio page was a good example. On bigger screens, I used a simple, two-column grid to display my projects:
.portfolio {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 2rem;
}This was the only part of my site that used 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! 👇