Grids are the future!
I recently had to do a presentation about something web related for school. I chose to talk about CSS grids because I’d learned about them when I studied web design and I felt like I had something to share with my classmates. Like how I use the 960.gs Photoshop template whenever I put together a wireframe for a site I’m building. Or how Bootstrap is really easy to incorporate into a site. But I was naive when I picked the topic, because I had no idea that grids are the future! That grids are basically the new Flexbox.
Oh Flexbox… you made me forget all about floats! And soon, CSS grids, without linking to an external style sheet, will make me forget about… Flexbox? No… not exactly. But development on CSS grids has been happening for a while, and it looks like everyone will be using grids soon.
For those who don’t know, grids are a set of vertical and horizontal guidelines to help organize and structure content and keep a consistent design structure throughout a site. Grids use columns and rows, separated by gutters, to create the visual structure of the page.
According to A Complete Guide to Grid, “the CSS grid layout is the most powerful layout system available in CSS”. Why? Because grids help establish a consistent, logical screen layout that allows you to plug in text and graphics easily. And where Flexbox is largely a one-dimensional system, grids are two-dimensional and can handle columns and rows at the same time. So you will still use Flexbox, but soon, you can use grids too. They will join forces to create the perfect website layout.
If you are dying to use a grid in your website now, you can use a grid system, like Bootstrap or 960.gs. There are other systems too. Simply download the files or link to the CDN, and then use the grid styles in your CSS.
Or you can test out the future and play around with the new grids by enabling experimental web platform features in your browser, and then applying display: grid or display: inline-grid to a parent element along with other styling. Just remember that grids do not yet have full browser support, so be patient. To learn more about how to test out grids now, check out www.sitepoint.com/introducing-the-css-grid-layout/.
For more detailed information about grids, check out the following: