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.
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.
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.
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.
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.
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.
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.
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.