What is a grid?
A grid provides order and structure in a website design. Horizontal and vertical lines intersect to form a grid in which elements of a design are placed and content is neatly aligned.
Why do website designers need to use a grid system?
A grid system enables designers and developers to work together for quick prototyping and reorganizing of layouts. Grids provide organization, help to segment information, establish a content hierarchy and create balance, consistency and unity in website design. The 960 grid system is used to simplify web development workflow by providing commonly used dimensions, based on a width of 960 pixels. The 960 grid provides the flexibility to design layouts in 2, 3, 4, 6, 8, 12 and 16 columns. Today, there are computer screens that are much wider than 960 pixels, which is how the 1170 pixel grid evolved. For responsive layouts, you need fluid grids, using flexible frameworks like Twitter Bootstrap which helps you design layouts that adapt perfectly to all screen sizes on multiple devices. The fluid grid uses percentages as opposed to pixels to define column widths. You can use a grid generator like the Zurb CSS Grid Builder or Gridulator to generate a grid.
In many website designs, you don’t obviously see the grid as it is invisible, but it was used to give the page its structure. Shown below however are some striking website templates designed using the grid not just as the undergirding of the design, but as an essential design element.
Anchor | Freelancer & Creative Agency Portfolio HTML Template
Plant Store – Gardening & Houseplants PrestaShop Theme
Modulus – Furniture & Interior Premium Shopify 2.0 Responsive Theme
Shoes Store Templates Shopify Theme
Akel – Minimal Portfolio Website Template
Template 41849 – Anthony Moor Moto CMS HTML Template
This grid based template using a monochromatic color theme, makes a statement about a personal website. The shades of the same color are used in the squares to highlight different sections.
Template 47007 – Advertising Agency Responsive WordPress Theme with Portfolio and Blog, Admin Panel
This is a WordPress Theme with Bootstrap, suitable for an advertising agency, media company, or design studio. The design uses a textured grid for the header, footer and portfolio background. Homepage content is divided into sections for easy reading and navigation. Focus is on the portfolio with ribbon captions, and an at-a-glance company overview on the homepage.
WiderGrid – Responsive Retina-Ready HTML5 Studio
Template 46078 – Template 46078 – Beauty Website Template with Homepage Portfolio, Cool Add-ons
Red and black present a sophisticated look in this Beauty website template with an impressive homepage portfolio. Images scroll and zoom on hover, enlarge on click and can be viewed as a slideshow. The portfolio remains in the background and images animate as pages slide into view on menu click in this single-page design.
This template is suitable for a technology products or services company. Turquoise blue and white convey inspiration, positive thinking, creativity and efficiency. Shadow effects lend a 3-D feel to the menu and to the squares in the header. The template uses small icons in the menu and large graphics in the header. The design presents an organized and professional look. Large white fonts attract the viewer’s attention to content and invites him or her to click the Join Us button – which leads to the Blog with social sharing icons and comment forms.
The homepage showcases a 4-column portfolio of the photographer’s works, with images that enlarge on click and can be viewed as a slideshow. Clicking the arrow under the photographer’s name reveals a menu in orange on grey.
Template 46516 – April Nelson Responsive Website Template
Green, grey and black spell freshness, dependability and sophistication, making a pleasing combination in this Travel Joomla website template with Bootstrap. The homepage displays the gallery in a grid format, with images that enlarge on click and can be viewed as a slideshow.
Template 45237 – Bride Wedding Website Template
18augst Flat and Responsive Portfolio Gallery
Template 46541 – Handyman Services Responsive Website Template
Template 42991 – Juf Design Website Template
Template 46360 – Xtraclean Photographer Website Template
Color Grids – Responsive Creative Portfolio
This Joomla template with Bootstrap is ideal for a photographer or photo studio. The template features an illustrated logo, background textures, a grid format, white space and a clean layout to give a professional and designer look.
Template 44132 – Responsive Web Design WordPress Theme with Bootstrap
This template features the logo on black as part of a strip of rainbow colors below a menu with arrow pointers on hover, on a textured grey background. A grid layout shows a web design portfolio on the homepage itself, leading into the site with detailed views of the specific designs. The gallery-style Service page has images with zoom features and captions describing the services offered.
Template 45704 – Food Online Responsive OpenCart Template
Template 45893 – Maturity Business Responsive Website Template
Template 44822 – Carpower Cars Responsive Website Template
Template 46392 – Qsign Design Moto CMS HTML Template
Template 45710 – Online Tickets Responsive Magento Theme
Template 43367 – Creative Advertising Agency Joomla Responsive Bootstrap Template
The homepage image slider quickly presents a striking collage of colourful photographs against a black background, using JS Animation for image transitions to keep the template lightweight. The dropdown header menu in grey on black with yellow highlights on rollover makes a design statement.
Template 41862 – Tom Bunton Moto CMS HTML Template
