Over the years, CSS (Cascading Style Sheets) has continually improved as a visual language, adding features that allow it to do more on its own without additional JavaScript or Flash scripting in the browser. With CSS3, the latest version of CSS, helpful features have made it easier for designers to do more with less. But when it came to the way designers approach layouts in web design, improvement has been considerably slower. The primary options for creating layouts in CSS were tables, then floats and inline blocks, then Flexbox—and all had their shortcomings designers had to “hack” their way around.
For front-end developers, third-party frameworks and technologies like Foundation and Bootstrap have made it easier and faster to create better layouts—but CSS has been catching up with its own, native specification: CSS Grid.
CSS Grid been in development for about the last five years, but until the time of this article, it lacked widespread support from most browsers. Developers who wanted to use CSS Grid had to enable this experimental flag in the browser. Now, as of March 2017, CSS Grid support is offered out of the box with the newest versions of Chrome, Safari, IE, and Firefox—and here’s what you need to know about using it.
WHAT IS CSS GRID?
So how is it different than existing native layout modes like Flexbox? In short: It enables 2-dimensional layout design with columns and rows simultaneously, which means it’s easier to build more dynamic, asymmetrical layouts.
First, let’s review a couple of other ways you can control layout in CSS.
CSS LAYOUT OPTIONS: BOX MODEL VS. FLEXBOX VS. CSS GRID—HOW ARE THEY DIFFERENT?
The box model in CSS gave designers a native way to treat HTML elements, using height and width, padding, borders, and margins. This enabled them to define space between elements and add treatment to them with borders. Fixed column heights and the float and clear properties then allowed you to align these boxes and/or stack them in columns, either on their own or within a box container. But, this was a lot of work and a bit of a hack.
To make this easier, CSS3 launched a new and improved native layout mode: Flexbox. This improved on the box model by giving designers more control over the layout without needing to use floats and clears. In Flex, you can flow elements in either rows or columns (but not both simultaneously) by creating flex containers and within those, flex items.
This makes Flexbox great for organizing the layout of certain components on your page—whether that’s a navigation bar, a sidebar, or a footer—or smaller-scale layouts. You can apply styling to containers that dictates how the items within them behave, whether that’s to make them grow, shrink, stack, wrap, justify, align, and more. In short, flex containers provide a very helpful shortcut to organizing a layout, but they have some limitations.
CSS Grid solves this by allowing designers to control both columns and rows simultaneously. (Note: This is not the same grid as the grid systems that come with CSS frameworks like Bootstrap or Foundation—CSS Grid is native to CSS.) It’s the most powerful layout option because of its unparalleled ease and flexibility.
Right out of the gate, you get way more control over your layout—something that’s very helpful when creating larger-scale layouts, more unorthodox layouts, and asymmetrical layouts.
HOW DOES CSS GRID WORK?
If Flexbox works from the content out, Grid works from the content grid in.
Grid lets you define a grid for the layout of a page, with grid rows and grid columns (grid tracks) and grid areas that can contain a number of grid cells within them. Grid containers house grid items, which can inherit CSS properties in a parent-child relationship. A grid item can span grid tracks—meaning an element can be in both a column and a row at the same time, something you can’t do in Flexbox.
Or, you can have grid rows that have different width items within them. This is possible by setting fraction units, which offer even more control by giving you the ability to create a fixed width for a grid area. This means that you can space items in a grid more how you want—stretching one element across two rows, for example. You can see some examples of grid layouts here or watch this video for a visual introduction to the specification.
Grid is also packed with rules you can use to customize all of that as much as you want. Say you’re creating a photo gallery and have images in different sizes, like standard rectangle, square, or panoramic. You can code your grid to auto place images (grid-auto-flow) where they’ll fit best. This means you can make a “smart” photo gallery if you want, where source order gets overridden in favor of putting items into the most suitable cells of the grid possible.
HOW TO BEST USE GRID
All of these layout options (Box, Flexbox, and Grid) can work together in tandem, which makes it easy to incorporate a Grid layout into a specific part of your website if you need it. Use Grid as enhancement, for photos galleries, etc., and use it to make very intuitive responsive design possible. You can create a grid layout for your site, then use media queries to dynamically fill in the grid’s content depending on the device or screen size (and regardless of their source order).
For developers, there are plenty of great resources around the web that give tutorials about how to use Grid. If you’re a client and want to use Grid for your UI layout, find a skilled CSS3 designer with expertise in Grid on Upwork today.
Upwork is a freelancing marketplace where businesses of all sizes can find talented professionals across multiple disciplines and categories. If you are a business and are looking to get projects done, consider signing up!
BY - FREELANCE CONTENT MARKETER AND WRITER
https://www.upwork.com/hiring/design/css-grid-advantage/
