iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
The 1140px Grid was a 12-column layout that could fill a wide page up to a maximum width of 1140px, then contract as the browser narrowed. Its enduring idea is a fluid container and flexible columns—not a rule that every modern site should be 1140px wide. If you are widening an older layout, choose a maximum that suits your content and let the design adapt when space runs short.
What was the 1140px Grid?
In Jennifer Farley’s SitePoint article, published December 20, 2010 and updated February 13, 2024, the 1140px Grid is described as a fluid, 12-column framework created by Andy Taylor. The columns could be combined into spans of two, three, four, or six columns. The layout used percentages, so it could contract below its maximum rather than remain a fixed-width canvas.
Farley framed 1140px as a way to make use of wider browser windows while fitting within a 1280px monitor. That was the article’s design rationale in 2010, not a current claim about monitor use or a recommendation for every site. The 1140px figure is the grid’s maximum layout width, not a requirement that the page always occupy that much space. Read Farley’s account of the 1140px Grid on SitePoint.
Free tools Windows power users keep installed
One-click scans. No signup required.
How did its columns, gutters, and images behave?
Columns and spacing
The grid divided its available width into 12 percentage-based columns. Farley reported that the gutters scaled with the layout and reached 40px when the grid was at full width. This makes the framework’s spacing behavior part of its fluid design, rather than a set of fixed-width columns with an unchanging gap.
#1 Best Overall
Images
In the original description, an image narrower than its containing column kept its intrinsic size; an image wider than the column shrank to fit. That describes the framework’s behavior, not a blanket rule for every image treatment. In a current layout, prevent media from overflowing its container and decide separately whether smaller images should remain at intrinsic size or expand to fill available space.
A historical rendering detail
Farley noted that the grid’s 1140px Photoshop template rendered at 1133px in WebKit, attributing the difference to browsers rounding subpixels differently. This is a detail of the period’s template and rendering behavior, not a current CSS sizing target.
How to approach the same problem with modern CSS
Responsive design is an approach, not a specific framework. MDN notes that modern CSS layout can be responsive through flexible grids, relative units, and minimum or maximum sizing; media queries are useful when a layout needs a deliberate change, but are not required in every responsive design. MDN’s responsive design guide explains these techniques.
Recommended Free Tools
- Set a content-based maximum. Let the page container use the available width, with an optional maximum such as 1140px. Treat that value as a design choice, not a universal standard.
- Keep the columns flexible. Use a layout that can distribute available space rather than locking every column to a fixed pixel width. Reconsider the number of columns or their arrangement when the content no longer fits comfortably.
- Constrain media to its container. Make images and other media able to shrink when their containing column becomes narrower, so they do not force horizontal overflow.
- Adjust spacing when the content calls for it. Gutters may scale with the container, remain fixed, or change at selected layout transitions. Choose the behavior that preserves readable content and usable space.
- Add breakpoints for actual layout needs. Use a media query when the content or component needs a different arrangement at a particular viewport width; do not choose a breakpoint merely because an older framework or screen-size convention used it. MDN’s media-query reference covers viewport- and feature-based conditional styling.
There is no single best maximum width established for every site. A wide container can give a multi-column page room, but a longer line of text is not automatically easier to read. Judge the maximum and the transitions against the actual content and components on the page.
What the 2010 compatibility notes do—and don’t—tell you
Farley’s 2010 article listed Chrome, Safari, Firefox, IE7, and IE8 for the grid, and said IE6 did not support max-width, so the layout would span the browser instead of stopping at 1140px. It also reported support or testing for iPhone 3 and 4, iPad, some Android phones, and BlackBerry, with behavior depending on handheld stylesheets and/or media queries. These are claims about the article-era implementation; they do not establish current browser or device support, or current testing.
Should you use 1140px?
Use it only if it suits the page. The original grid is useful as a historical example of a fluid, percentage-based column system with a maximum width. For a new or updated layout, decide based on the content’s comfortable measure, how many columns the page needs, how its spacing should behave, and what arrangements remain usable as the viewport narrows. Neither the cited account nor the current MDN guidance establishes 1140px—or 1280px—as the universally correct content width.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →
