SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Avoiding Common Problems with CSS Grid

October 25, 2017 by Alex Fox

For many dark days, properly aligning objects on a webpage with CSS alone was close to impossible. With mostly-functional semi-hacks like float, positioning and in-like block,  we could make it work, but it was far from perfect. When vexed by a particularly troublesome layout quirk, some event lamented the loss of <table> as a structural element. Darkness lay upon the world. And lo, CSS Grid arrived in our hour of greatest need, to render salvation unto developers from the grim despair of fixed layouts.

CSS Grid is the most powerful tool for organizing page content since tables. As a two-dimensional system, it can handle both columns and rows, unlike its predecessor flexbox, which could only handle a single dimension of organization. It also does away with some of the wonky flexbox stuff, like auto-stretching content to fit the layout’s width if you’re not careful about counting your cells. But considering all the positional system we’ve used over the years, it’s easy to get hung up on some common issues.

Draw your grid first

If you remember the time when tables were used for layouts, you might remember using a lot of graph paper to design sites. Grid-based layouts require the same careful preparation. Working out a grid in the vague space of fractions, percentages, pixel widths and auto spacing alone is challenging. It’s hard to visualize the space from numbers alone. While the CSS Grid syntax is reasonably clear, it’s no substitute for a good visual. Put your wireframing skills to work and sketch your layout before you start coding. Figure out how you’ll organize the grid, what the various widths will be, and how to snap things together. Then, turn that visual design into code.

Name things logically

CSS Grid provides a multitude of ways to specify tracks. You can give your columns and rows specific names, refer to them by number or anything else you’d like. Use the same care you would exercise when naming variables in a program. Either choose obvious, descriptive names, or use a numbering system that follows a clear convention. While it should seem that descriptive names are the better choice, they aren’t always possible. Set up a system, follow it, and explain it in the comments.

Use fractions with care

One of the more useful features of CSS Grid is the power to set track widths as fractions of the available space. Specify four fractions with the fr property, and you’ll see four even tracks appear before you. Of course, this works best when you’ve specified the maximum available space your container can occupy, but that’s not the issue. It’s when fractions are calculated that can throw newer designers a curve ball. Fractions are calculated after any non-flexible spacing. If you mix together fractions and pixel widths, for example, the fractions will be calculated based upon the space remaining after the fixed width tracks are accounted for. This can lead to some wonky columns that make sense in your head but don’t work out on screen. Depending on whether or not you expect this behavior, it can be either exceptionally useful or exceptionally confusing.

Whitespace counts too

When you’re first laying you your grid based on your wireframe, you’ll need to get a sense of how many columns and rows a given item occupies. Keep in mind that the space between elements, either horizontally or vertically, also counts as a row. This whitespace might be empty of content, but it’s a crucial organizational tool for laying out content with CSS Grid. Make sure you’re accounting for the space between objects, as well as the objects themselves, when you start to code your grid.

Start with a simple grid

Creating a perfectly even grid template is often the best choice for a basic design. By using the fewest number of columns and keeping things evenly organized, you can easily create symmetrical designs without too much frustration. Applying a balanced grid, by keeping your rows and columns even simplifies the design process. It reduces the number of ways you can mess up. Unfortunately, it also reduces your creative options. For your first projects with CSS Grid, working with a simple grid is perfectly fine. As you get a better handle on how the system operates, you can start experimenting with unbalanced and asymmetrical grid designs.

Understanding explicit and implicit grids

Explicit grids are made from the parameters defined directly by the designer. But because CSS Grid is also a little smart, it will automatically apply some grid plans in order to implement your rules. For example, if you have ten divs in a row, and specify a grid with three columns, you’ll find you get four row automatically. The three columns were explicitly defined. The four rows appeared as a consequence of the columns and the number of elements. The rows are the implicit grid. Make sure you understanding the distinction between these ideas so you can exploit them properly.

Grid are great, just like practice

Learning a new skill always takes time. Take advantage of the many excellent resources for learning CSS Grid online. This CSS-Tricks post is an excellent functional introduction, and Google even has a good CSS grid guide.

You might also like the following posts:

Modern Tools for Advanced CSS Development

28 Free Open Source CSS3 Code Snippets

40 CSS Apps, Tools, and Resources for Web Developers

Filed Under: CSS, Design, Uncategorized Tagged With: css, grids, layout

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022