Create a simple grid for a website design project

Achraf garai -

Introduction

Grids are not only an essential part of every design, they are also a great way to communicate a layout to with other team members.

As a designer grids are very essential to add good structure to your design, and will make it easy for developers to build it in CSS.

Understanding containers

by default elements on a web page will take the full width of the screen. Containers have 2 main functions.

  • To "Contain" elements and prevent them from always taking the full screen width
  • Give withe space to the sides to make the web page easier to read and navigate.


Before you start creating a grid, you will need to choose your container maximum width. By Commonly used containers have a with of 960px or 1160px.

Grid composition

Girds are made by a number of columns separated by a space called gutter. Most designers choose 12 columns because it helps you do multiple layouts.

  • Columns are the space that will hold any design elements you create
  • Gutter are the space between each two columns
  • Container is the max width of the grid system.

For this tutorial, let's choose a 1160px container, 12 columns and 16px gutter.

In order to create your grid in your design tool of choice, you will need to calculate the column with based on the gutter, container and number of columns that you chose.

http://gridcalculator.dk/

From using the calculator, the can know exactly the column width based on the constraints we specified.

Create a grid in figma

Let's create the grid on an iMac Pro art board of 1440px with.

  • Select your art board and go to grid, make sure you set it to columns.
  • Switch stretch to center because we don't want the grid to scale with the screen.
  • Set the details we defined earlier, 12 columns,16px gutter and 82px column width.

Make sure you save your grid as a component so that you keep reusing it on other art boards.

Final Step

Now you're ready to go. For the final step, let's use the grid to brainstorm different low fidelity layouts.

Here are the things you need to consider when you're brainstorming.

  • How the user will navigate the interface you're building.
  • Which of my design elements are more important than the rest
  • How some elements may be related in some way
  • Make sure to communicate your Grid to developers so that you align on the layout and for them to start building this grid in their CSS.