Moving up to 1140px? Here's a Fluid Grid to Help

Many designers have been designing for 1024px screen widths for the past few years. The 800px resolution is long dead and buried, but is it time now to start designing for a higher resolution screen? With many users on monitors and laptops of 1280px wide and wider screens, how do you go about designing for that size?

A resource you may find useful is the 1140px Grid created by Australian designer Andy Taylor. The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. The grid consists of twelve columns, which can be evenly divided into columns of two, three, four or six. In terms of browser support, Andy’s grid works in Chrome, Safari, Firefox, IE7 & IE8. IE6 (there’s always one, isn’t there?) doesn’t support max-width, so the grid doesn’t fix to 1140px. It spans the full width of the browser.

Gutters And Images

The gutters vary in size because the grid is based on percentages. At full width the gutters are 40px wide. When using images, if an image is smaller than the column it is contained in, it will be displayed at its original size. If it is larger then it will be shrunk to the width of the column. For this reason the width and height of the images should not be defined.

Grid For Mobile
The grid has not been designed to support older WAP phones, but has been tested and supports the iPhone 3 and 4, iPad, some Android phones and the Blackberry. It works for devices that recognize ‘handheld’ in the style sheet media and/or media queries. With media queries you can even include x2 images for the iPhone 4 Retina Display.

You can download the grid for free from here. The download features an index.html file and six style sheets. It is licensed under a Creative Commons Attribution-ShareAlike 3.0 Australia License. You can also download a Photoshop template of the grid at 1140px here, which is based on how it’s displayed in Web Kit, so it’s actually 1133px, as all browsers round sub-pixels slightly differently.

What resolution are you designing for? Is is too soon to move to a 1280 pixel layout?

Frequently Asked Questions about 1140px Fluid Grid

What is a 1140px fluid grid and why is it important in web design?

A 1140px fluid grid is a layout design approach used in web development. It is based on a grid system that is 1140 pixels wide, which is divided into 12 columns. This grid system is important because it allows for a responsive design that adapts to different screen sizes. It ensures that the website looks good on all devices, from large desktop monitors to smaller mobile screens. The 1140px grid is particularly popular because it fits well within 1280px monitor resolutions, which are widely used.

How does the 1140px fluid grid compare to other grid systems?

The 1140px fluid grid is just one of many grid systems available for web design. Other popular grid systems include the 960px grid and the 1200px grid. The main difference between these grid systems is their width. The 1140px grid is wider than the 960px grid, allowing for more content to be displayed on larger screens. However, it is narrower than the 1200px grid, which can be beneficial for designs that require more white space or margin.

How can I implement a 1140px fluid grid in my web design?

Implementing a 1140px fluid grid in your web design involves using CSS to define the width and margins of your page elements based on the grid. You can use a pre-made CSS grid framework, such as the 1140px CSS Grid, or you can create your own custom grid. When using a grid system, it’s important to ensure that your design is flexible and can adapt to different screen sizes.

What are the benefits of using a 1140px fluid grid?

Using a 1140px fluid grid offers several benefits. First, it allows for a responsive design that looks good on all devices. Second, it provides a structured layout that can make your design process more efficient. Third, it can help to ensure consistency across different pages of your website.

Can I use a 1140px fluid grid with Bootstrap?

Yes, you can use a 1140px fluid grid with Bootstrap. Bootstrap is a popular CSS framework that includes a responsive grid system. By default, Bootstrap uses a 12-column grid, but you can customize this to use a 1140px width instead. This can be done by overriding the default grid settings in your custom CSS.

What are some common challenges when using a 1140px fluid grid?

Some common challenges when using a 1140px fluid grid include ensuring that your design is truly responsive and adapts well to different screen sizes, and managing the layout of your content within the grid. It can also be challenging to ensure that your design looks good on screens that are larger or smaller than 1140px.

How can I overcome these challenges?

Overcoming these challenges involves careful planning and testing. You should always test your design on multiple devices and screen sizes to ensure that it looks good and functions well. You can also use CSS media queries to adjust your layout for different screen sizes.

Are there any alternatives to the 1140px fluid grid?

Yes, there are many alternatives to the 1140px fluid grid. Other popular grid systems include the 960px grid and the 1200px grid. You can also create your own custom grid system based on your specific design needs.

Can I use a 1140px fluid grid for mobile design?

Yes, you can use a 1140px fluid grid for mobile design. However, because mobile screens are much smaller than 1140px, your design will need to be responsive and adapt to the smaller screen size. This can be achieved by using CSS media queries to adjust your layout for smaller screens.

Where can I find more resources on the 1140px fluid grid?

There are many online resources available for learning more about the 1140px fluid grid. Websites like SitePoint, StackOverflow, and CSS-Tricks offer tutorials and articles on the topic. You can also find pre-made CSS grid frameworks that use the 1140px grid, such as the 1140px CSS Grid.