A guide by Lindsay Marsh




 
ANATOMY OF A GRID
FLOWLINES




 


MARGIN
  MODULES


 
 ­
 
  
 
   
  


 

 SPATIAL ZONES
‚ 
COLUMNS 




 




    ­
   

 


 
 
­
GUTTERS

 



ƒ
ROWS 




€







GRID TYPES ‚ 

MANUSCRIPT GRID 

 
„…„ 


  


 ­

  

­ 
   


 
 

COLUMN GRIDS
†  


­
 
‡
­




 

 ˆ‰Š
‹ˆ
 
­ 



MODULAR GRIDS
Œ­  

  ­ Ž

 


  Œ
‡
 
  ‘


CAPTION
HERE
“ƒ


­ 



“ƒ
 

”

­
‹•––

THE MAIN STORY

HEADLINE
HERE
 

  
  
 
    


         



 
  

         




 


  
        
 
       

 
     

CAPTION HERE
        “ƒ


­ 
  

 
 “ƒ
 
   
”

­‹•––
­

HIERARCHICAL GRIDS

 
 
­






  
’
 
 
  





 
„  
 
 

 



COMBINING GRID TYPES

—




  

  
 
 


 







 ­ 






THE MAIN
STORY
HEADLINE
HERE

˜


™
š








 “ NOMINATI. MELIUS
MAIORUM DOLORES NE
VIM, MOVET IISQUE
CONSTITUTO CU QUO,

ƒ

ƒ› >

€ƒ‚

 
Ž


  
USING HEADLINES USE THE MARGIN
GRIDS — 

€   ­

œ 
 ­

  ­ 

COVER STORY
GO
THE MAIN VERTICAL
STORY 


HEADLINE
­



MAKE SURE
VITAL TEXT
HERE Ž



 
STAYS 
OUT OF
THE
MARGIN

LOREM IPSUM       

 
      
­
›
DOLOR SIT AMET,              
 
  
 



       
NE MAZIM    
PERICULIS MEL. UT 
       
PONDERATOMORU      
   
M MEL, EI SIT            
    
MUTAT REGIONE.




“


 
 NOMINATI. MELIUS MAIO-


RUM DOLORES NE VIM,

  MOVET IISQUE CONSTITU-
TO CU QUO, VIM EI NISL..
  

 
     
   


   

    
              


        
     

               
  
      
  
         
     ­   
  
   
 
        
        
     
   
 


      
     
      
                 

BREAK UP LARGE BODIES OF TEXT OVERLAP ELEMENTS

‡
 
­Ž
 „
 
 ­


  
‡
 ­
 ­ 

GRID SIMPLE SOCIAL MEDIA GRAPHIC

IDEAS

NOW OPEN 10AM-10PM!

NOW OPEN 10AM-10PM!

GRIDS IN LOGO DESIGN

GRIDS IN
LETTERHEAD


BRANDING 





 
  




ƒ

 
­

GRIDS FOR WEB

GRIDS FOR MOBILE

ž

Š
  


 
 



 


  ­
GRIDS CAN BE TURNED DIAGONALLY
 USING GUIDES
DESIGN IN EDITORIAL LAYOUTS