30 Blocky Website Designs Based on a Square Grid

Home » Articles » 30 Blocky Website Designs Based on a Square Grid

Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more

Grids give a website design structure and balance, but some grid layouts are more obvious than others. The most basic of grids is the square block, where the page is divided up horizontally and vertical with equally spaced gridlines. The content then fills the grid like a chequerboard pattern, or elements can span multiple blocks to form larger content areas. Today’s showcase features 30 perfectly balanced sites that are all based on a blocky square grid.

The Conference

The Conference

Simon Foster

Simon Foster

Peachey Photography

Peachey Photography

ELI

ELI

Jonathan Patterson

Jonathan Patterson

Sivert Høyem

Sivert Høyem

Script & Seal

Script & Seal

Guy Moorhouse

Guy Moorhouse

PFD

PFD

The Escape Committee

The Escape Committee

Jan Finnesand

Jan Finnesand

Sebastian Sejer & Co

Sebastian Sejer & Co

Julian Weidenthaler

Julian Weidenthaler

Dumbo Townhouses

Dumbo Townhouses

WeLoveNoise

WeLoveNoise

Float

Float

Incredible Types

Incredible Types

Etch

Etch

Hommard

Hommard

adaptable

adaptable

Heydays

Heydays

Matchstic

Matchstic

Résidence Mixte

Résidence Mixte Modular Grid Layouts

Heavy Heavy

Heavy Heavy

Jonathan Da Costa

Jonathan Da Costa

MAP

 

MAP

Hatch

Hatch San Francisco Modular Grid Layouts

Atlason

Atlason

Script & Seal

Script & Seal Modular Grid Layouts

Yvan Rodic

Yvan Rodic

Design Your Life

Design Your Life Modular Grid Layouts

Author
Iggy
Iggy is a designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design trends, inspiration, design freebies, and more. You can follow him on Twitter

14 thoughts on “30 Blocky Website Designs Based on a Square Grid”

  1. These are so beautiful! Thanks for the share! Been looking for some inspiration for a new project fromBibble Studio and think I have certainly found a good collection

    Reply
  2. Excellent collection. There is one mistake though: Arbeiten is German and means simply “works”. The site is called julianweidenthaler.com

    Reply

Leave a Comment

Verified by MonsterInsights