Gecko v7 Gecko v7
  • +44 (0) 131 240 3390
  • +44 (0) 131 240 3390
    • Home
    • Design
      • Close
      • Design
      • Brand Strategy
      • Web Design
    • Development
      • Close
      • Development
      • Umbraco
        • Close
        • Umbraco
        • What is Umbraco?
        • Umbraco Features
      • Custom API Integrations
      • Custom Web Development
      • Virtual Website Planning
    • Digital Marketing
      • Close
      • Digital Marketing
      • Search Engine Optimisation
      • Paid Search Marketing
      • Content Marketing
      • Social Media Marketing
    • Support
      • Close
      • Support
      • Support Packages
    • Blog
    • Case Studies
    • About Us
    • Contact
      • Close
      • Contact
      • Edinburgh
      • Chester
      • Lisbon
    • +44 (0) 131 240 3390
    • +44 (0) 131 240 3390

    CSS Grid Guide

    9th August 2019

    What is CSS Grid?

    CSS Grid Layout is the new layout kid on the block. It is a new CSS module that allows you to control your site layout easily and with so much more control and cleaner markup than is used currently in a lot of sites. 

    One of the main benefits of it is that It works in two dimensions, vertical and horizontal. Unlike flexbox which only has one dimension, horizontal. This is not to say it should replace flexbox, on the contrary. Flexbox and Grid go very well together.

    How to use CSS Grid?

    So, before we dive right in and start using it we need to understand how it all works. I am going to work from big items to small items here. I will also provide code examples. 

    At the end of these examples, you should have an understanding of how to do a standard layout consisting of a header, content, sidebar and footer. 

    Container

    The container is just a wrapping element that should have display property set to grid. It is the very top level of the Grid. Adding this property will not change the look of the container. It is simply a root element that will tell the children how to behave. 

    Item

    Each child element of a container is often called an item. You can see in the above example that I have given each item a class of item to illustrate this.

    Columns and Rows

    To define our columns and rows we need to use the properties grid-template-columns and grid-template-rows. As you can see in the example below grid-template-columns is set to 3fr 2fr 1fr. Here I am using fraction units(fr) to define the amount of space that each column cat take up. As there are only three columns I have only set three values. The first takes up half the width, second takes a third of the width and the last one takes a sixth of the screen. 

    The value set for grid-template-rows is set to 30%. This will only affect the first row, setting its height to 30%. The rest of the rows will have an automatic height given to fill the screen. 

    This is the most basic way to layout a Grid.  

    Lines

    With line numbers, you can set where your grid items start and when they end. As you can see in the example below item number 1 has a grid-column-start of 1 and a grid-column-end of 4. This means it will start at the left edge of the first item and will end at the left edge of the fourth item. Since our grid is only four items wide it appears to only cover three columns. This is expected. The other property you can see is grid-row-start and grid-row-end. These work in the same way but work from the top edge of the items working downward. You can see that the first items is starts at 1 and ends on three. This means it will cover two rows. 

    Area

    Another way to control the layout of the Grid is to use areas. These are defined areas that you can set via the grid-template-areas property. 

    In the below example I have set up four areas called nav, main, aside and footer. These represent a typical layout you would see on an everyday website. Once you have declared your areas using the grid-template-areas property on the container you can then set up additional rules for each area by creating a CSS rule for adding the property grid-area with your predefined area name as the value.

    Gap

    We don’t want all of our items to be hugging one another so tightly. To give them a little breathing space we can add the grid-gap property to the container to just to separate them a little. 

    Final product

    As you can see in the below example you can easily manage the large sections of your layout with the Grid rather than having to use Flexbox. Flexbox will come into its own within each item of the grid as within these cells it will be one dimension.  

    See the Pen   CSS Grid - Final by Peter Doyle (@geckopete)   on CodePen.

    Which browsers support CSS Grid?

    The browser support for this feature is great. One of the main questions I ask when it comes to support is will it work on older versions of IE and the answer is no. below IE 11 it will not work and even with that IE 11 has different syntax so it can be clunky to use. 

    Lack of support would not stop me from using grid as you can easily write the CSS in a way that there is always a fallback layout. If a browser does not understand a CSS rule it will just ignore it. So before you set your grid CSS you might want to set it as a float layout and set a % width or if you are really brave you could a table layout. The choice is yours but I will not go into details about adding fallbacks. 

    If you do need fallback you can check out this article by Rachel Andrew Grid “fallbacks” and overrides.

    Resources

    A Complete Guide to Grid

    This is a complete guide to CSS Grid. This is my main resource for finding features that I have not previously used. I often have it open in one of my many tabs when doing initial layouts. 

    Grid by example 

    This is a great site that shows you in-depth examples of different use cases for CSS Grid. When learning about Grid at first this site was a lifesaver. 

    CSS Grid by Wes Bos

    If you have the time I can highly recommend this course by Wes Bos. It is totally free and is FILLED with quality content. 

    Have any other questions about CSS Grid? Be sure to get in touch!

    - Pete

    9th August 2019 Share This:
    ...
    Author
    Peter Doyle
    Developer
    One of our Build Developer's who is based across the water in Ireland. With Gecko since 2011, Pete loves solving problems for our clients. Away from his desk, you will find him writing novels or in the garden growing his own veg!
    @Twitter
    Read more from Gecko
    Deadline 25th May for GDPR - Will you be ready?
    How to Optimise Images for the Web Without Losing Quality
    6 Top Tips For Writing Effective Ad Copy
    Follow Us:

    Gecko Agency (Edinburgh & Chester)

    hello@wearegecko.co.uk
    t: 0131 240 3390

    t: 0131 240 3390

    Head Office

    Orchard Brae House
    30 Queensferry Road
    Edinburgh
    EH4 2HS

    North West

    11a Lower Bridge Street
    Chester
    CH1 1RS

    Lisbon

    Av. Salgueiro Maia, N. 1025
    Arm.14B
    Rana

    Gecko Agency Ltd | Copyright © 2021

    • |GDPR
    • |Privacy Policy
    • |Cookie Policy