Simple Grids

Posted on:

#grid #design

Grid Layout Draft
3-Column Split Example
Grid Examples
Grid Structure Example

A Basic Theory Of Grids

Whether you work in print or in web and mobile design, you need to understand the basics of grid theory.

ANATOMY OF A GRID

Whether simple or complex, all grids have some common parts:

Margin for a block of content
Margin for a block of content

The space between columns is referred to as alleys.
The space between columns is referred to as alleys.

Modules are units created from the intersection of rows and columns.
Modules are units created from the intersection of rows and columns.

1. Know Your Grid Anatomy

Grid for Web Design

1. Columns

Design Grid Columns

2. Rows

Rows

3. Modules

Design Grid Modules

4. Gutters

Design Grid Gutters

5. Margins

Design Grid Margins

2. Choose the Right Grid Layout

Grids in Web Design
Example Design Grid 1
Example Design Grid 2
Common Grid Structures
Grid Parts
Content Not in Gutters

Using Grids in Interface Designs Building Better UI Designs with Layout Grids

Code

Art

Design

UI/UX

Video

Projects

Social