Create a Centered Three Column Layout with Grid and Flex

Create a centered three column layout with Grid and Flex ⌨️

Courtesy of @webdev.tips
⠀
Three columns layouts are one of those super mainstream layouts in webdesign that we all use. That being said, is super useful to master this type of grid layouts in order to easily implement any design that you want ☝
⠀
In our ‘grid-container’ class we’ll have ‘display: grid’ to initialize the grid. Then, since we want to have three equal sized columns we use ‘grid-template-columns: 1fr 1fr 1fr’. ‘Fr’ symbolizes a fractional unit and ‘1fr’ means 1 part of the available space. So, with ‘1fr 1fr 1fr’ we’ll have three grid-items, each one with 1/3 of the available space minus the grid-gap.
⠀
Finally, we set ‘grid-gap: 20px’ to get a — wait for it — 20 pixels gap between each one of these columns. Pretty self explanatory, right? 😄
⠀
Finally, we want each of the grid items to have its content completely centered so we’ll use the almighty Flexbox (more tips on this will come). Just take a look at what the class ‘flex’ is doing in each of the items.
⠀
We just need to set ‘display: flex’ to start using Flexbox. Then we just have to use ‘align-items: center’ to keep the content vertically centered and ‘justify-content: center’ to get the content horizontally
⠀
That’s it! With just some lines of CSS, we get a perfectly centered three column layout 👌😁

End Result

HTML

CSS

Bonus — useful tools for everyday usage:

FlyWheel — is managed WordPress hosting built for designers and creative agencies.
Crello — a free graphic design editor that helps create images for social media, print, and other web-based graphics.
FlowKit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Integromat — is a powerful automation tool that connects your apps and services to work smarter, not harder.
Leadpages — lets you build beautiful, high-converting websites, unlimited landing pages, pop-up forms you can add to your other websites.
GetResponse — an email marketing platform that enables you to create a valuable marketing list of prospects, partners, and clients, so you can develop relationships with them and build a responsive and profitable customer base.
LetyShops — this service allows you to get a cashback of the amount spent on the purchase — up to 30%!
Zadarma — cloud communications platform that offers the best VoIP phone system — IP PBX, virtual numbers in 90 countries.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.