Responsive Web Design: Custom Grid Layouts

Share this article

In the last few parts of the responsive design series, I have introduced the characteristics of fluid layouts and I have described how to use fonts responsively. In this article, I want to introduce grid layouts, a widespread and popular design practice. While grid systems have seen significant use in printed media, interest from web and mobile developers has been a very recent development. A grid is a two-dimensional structure made up of intersecting vertical and horizontal divisions used to structure content. Grids serve as the framework on which a designer can organize text and images into a rational, easy-to-absorb interface. A well-built and properly-implemented grid system increases scalability and improves the readability of the content on a website or within a mobile application. The advantages of grid layouts are numerous; a grid structure…

  • gives order, originality, and harmony to the presentation of content;
  • allows users to predict where to find the information they need;
  • makes it easier to add new content without having it looking disjointed or marginalized.
To develop a well-built grid layout, the first step is to create the canvas structure itself. It’s the canvas’ size that determines the grid’s frame: it is divided into the number of columns the designer wants (3,5,9,12) and this is the starting point to work on your interface or layout. The size of a grid does not have to be defined with fixed parameters. A common and proper practice of design for this type of layout is to let the content define the space occupied by the grid, and not vice versa. In this case, “content” does not refer solely to the text; it also refers to everything that has value within an interface, including images, video, text, ads, links, and more. Rather than trying to hammer a variety of content sizes and types into a predetermined grid, you should design your grid around the size and nature of your content. Within your customized grid structure, the layout is divided with vertical and/or horizontal guidelines that provide a consistent organization of space. Once you define the margins and the spacing for columns, your grid will become a clear, logical, and useful organizational schema for your multifaceted mobile content.

Online Tools

Web design frameworks built upon HTML and CSS had become quite popular before newer, more robust frameworks popularized the use of grid-based layouts. The Internet is full of useful models and frameworks with CSS rules that help designers to create a simple, fast, and efficient grid layout for almost any purpose. Some layouts are flexible, others are quite rigid (after all, they are designed to constrain content). Some of them have between three and five columns maximum, while others have between 12 and 16 columns. I bring up the variety of grid frameworks to emphasize that they’re not all the same, and further, there are grids that are inherently better than others. However, to fully understand the benefits of a grid-based approach, you should consider a unique pattern and purpose for each project you have to develop. You should not be afraid to try a variety; remember, simplicity is often the winning design. On the web, there are many useful grid resources to help you build a properly-proportioned layout or interface for your projects.
  • Grid System 960: A tool that lets you create websites using a grid of 960 pixels. This number was chosen because it allows easy division into a variety of columns and rows.
  • Gridr Buildrrr: A tool that offers precise control over borders, margins, and box contents for custom projects.
  • Design by Grid: A magazine that publishes articles and tutorials on the creation of grid-based designs.

A Grid Layout Markup

If you’d like to try to develop a grid structure with your own hand-written code instead, determine an interface width and the size of the spacing between the various columns. Remember that in order to obtain a balanced effect, it’s important that the various horizontal spacings are of equal size. As discussed before, study your content first, think about how it should be positioned and arranged, and keep these ideas in practice throughout your grid development process. Add the main elements of your app or mobile website (header, main content, sidebar, and footer) in a wrapper, like this:
<div id="wrapper">
  <div id="header">Header</div>
  <div id="content">Content</div>
  <div id="sidebar">Sidebar</div>
  <div id="footer">Footer</div>
</div>
At this point, your content and your sidebar will be divided into sections, all of which will be assigned a class named Grid1, Grid2, Grid3, and so on (it depends on the number of grids that you’ve decided to build). Within each grid cell, there can be as many subsections as you would like to include.
<div class="griglia1">
  <div>Subsection 1</div>
  <div>Subsection 2</div>
  <div>Subsection 3</div>
</div>
As for the CSS, almost everything is based on the proper application of the float CSS property. For the correct positioning of the most prominent area of your grid design (that is, the grid’s main containers, which in turn contain subsections) you employ the so-called “opposite float” technique. For the grids and the horizontal spacings between them, you have to first create several self-contained sections of columns, and secondly, you have to assign each a float and a fixed width. I’ve applied this technique using the following CSS:
div.grid1
{
  float: left;
  width: 290px;
}
Afterward, you’ll apply the same float rule within the sections in multiple columns, giving a specific size to the width and to the right margin (10 pixels in this case) to separate them, like this:
div.grid2 div
{
  float: left;
  width: 250px;
  margin-right: 10px;
}
To add an additional level of modularity, enabling a section to occupy the space of two or more columns, let’s use so-called joint columns: you simply need to assign to an element a class of type ext2, ext3, ext4, or ext5 to have a section that occupies 2, 3, 4, or 5 columns instead of having a unitary width.

Conclusion

This article was intended to point out another possible technique for the design and development of a responsive layout or interface. If there’s one principle to remember about grids, it’s this: Don’t try to cram your content into an ill-fitting grid. If popular solutions don’t suit your needs, design your own grid tailored perfectly for your content. It can be done quickly and easily using a few columns, rows, and CSS declarations. Want to learn more about Responsive Web Design? Check out SitePoint’s new book, Jump Start Responsive Web Design!

Frequently Asked Questions on Responsive Web Design Grid Layouts

What is the importance of a responsive web design grid layout?

A responsive web design grid layout is crucial in today’s digital age where users access websites from a variety of devices with different screen sizes. It ensures that your website’s layout adjusts according to the screen size, providing a seamless user experience. It eliminates the need for multiple versions of the same site and enhances the site’s usability, accessibility, and overall aesthetic appeal.

How does a responsive web design grid layout differ from a traditional grid layout?

Unlike traditional grid layouts that are fixed and do not adjust to different screen sizes, responsive web design grid layouts are flexible and adapt to the screen size of the device on which they are viewed. This means that elements within the grid will resize and reposition themselves to fit the screen, ensuring optimal viewing and interaction experience for the user.

What are the key components of a responsive web design grid layout?

A responsive web design grid layout typically consists of a flexible grid system, flexible images, and media queries. The flexible grid system allows the layout to adjust to the screen size, flexible images resize and scale according to the screen size, and media queries allow the application of different CSS styles for different device characteristics.

How can I create a responsive web design grid layout?

Creating a responsive web design grid layout involves defining a flexible grid system, ensuring images and other media are flexible, and using media queries to apply different styles for different devices. CSS frameworks like Bootstrap or Foundation can also be used to simplify the process.

What are the best practices for creating a responsive web design grid layout?

Some best practices include starting with a mobile-first approach, keeping the design simple and clean, using a flexible grid system, making images and media flexible, and testing the design on various devices and screen sizes to ensure it works properly.

How does a responsive web design grid layout improve SEO?

A responsive web design grid layout can improve SEO by enhancing the user experience. Google favors websites that are mobile-friendly and provide a good user experience, which includes fast loading times and easy navigation. A responsive design also eliminates the need for duplicate content, which can negatively impact SEO.

Can I use CSS frameworks for creating a responsive web design grid layout?

Yes, CSS frameworks like Bootstrap, Foundation, and Bulma provide pre-defined classes for creating a responsive grid layout. These frameworks simplify the process and save time, but it’s important to understand the underlying principles of responsive design to use them effectively.

What are the challenges in creating a responsive web design grid layout?

Some challenges include ensuring the design works well on all devices and screen sizes, maintaining the same functionality and content across all devices, dealing with different input methods (touch vs mouse), and optimizing images and other media for different devices.

How can I test the responsiveness of my web design grid layout?

You can test the responsiveness of your web design grid layout by resizing your browser window to see how the layout adjusts. There are also online tools like Google’s Mobile-Friendly Test or Responsive Design Checker that can help. It’s also important to test on actual devices when possible.

How can I learn more about responsive web design grid layouts?

There are many resources available online to learn more about responsive web design grid layouts. Websites like W3Schools, GitHub, and UX Design Institute offer tutorials and guides. You can also take online courses or read books on the subject.

Annarita TranficiAnnarita Tranfici
View Author

I have a Bachelor's degree in European languages, cultures, and literature from the University of Naples. I'm passionate about graphics and web design, and for several years I've been working on projects and designs for many companies. I'm a writer for the Audero User Group; my specialties are HTML, CSS, Web Design, and Adobe Photoshop.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form