Fluid 1140 CSS Grid

The 1140 CSS fluid grid system is amazing. It make it so that designers can get away from designing in 1024px and developers from having to develop at 1024px. The best part with this fluid system is that it adapts to smaller screen sizes. The best size for this css grid is a 1280px screen but if you only have a 1024px screen you will still see everything like the 1280px screen. One of the best things about this template is really any developer can start using it and understand it.

High Points Of Fluid 1140 CSS Grid

The 1140px grid has a ton of great features. One of the most notable stated before is that it fluidity. This grid system can go as large as 1140px all the way down to mobile. When it gets to mobile size everything gets stacked on top of each other. Another great thing is that for designers you don’t have to design 1280, 1024, mobile, ect. You just have to design once and everything is done. Images get re-sized down smaller so you don’t have to declare inline sizes.

Cross Browser Compatibility

Another great part is the compatibility. This grid has been tested in Chrome, Safari, Firefox, IE 8, and IE 9. It does work in IE 6 but not completely because on IE 6’s lack of modernization. As for mobile browsers, it does work not in all but most modern handheld. Besides browsers and phones it works in pretty much every computer/mac web capable device. Anything from iMac, MacBook, PC laptop, old PC, Eee PC, iPad, iPhone 3G, iPhone 4, and more.

Example Of Coding

The template for this grid is made of a 12 col setup. The reason for this is because or 12’s divisibility. What this means is that in order to span across you will need cols that equal 12. This is done through classes. For instance you could use 3col, 6col, and 3col. That means in the area that you are coding you would have 3 columns that span 3/12, 6/12, and 3/12. You could technically build out a area of 12 sections by using 1col twelve times. In order to understand the coding I will give you an example it is simple to understand.

So to explain this example we will start at the top. You first start with your container. This encompasses the area that you are setting up. Really you only have to use one container unless you want separate container to span all the way across the screen. Then inside that you have your threecol, fivecol,, and threecol. All of these are encompassed with a row. That means as it sounds everything inside will span across one row unless you go over 12cols. The last and really important part is the last class. This takes the margin off of the right side of the final object and if you don’t have this class in place then your last object will go to the next line/row. All of the widths are done in %’s. What is great with this is you can do cols inside cols. So if you wanted to take the 3col and split it up into 3 separate cols you can use the fourcol.

Live Example

As for a live example of this grid you can use the site that you are on ShaneStrong.com. It is built on the 1140px grid system. In order to test this you have to click your restore/full screen square in your browser most of the time it is the box between your minimize and close box. Once you click that grab the side of your screen and go in and out. You will see that everything re-sizes. Try this on another site. Most website don’t take advantage of a percentage or fluid template. Most are fixed widths like 980px/1000px.

More Information

If you would like more information about the grip or to download this grid system please go over to CSS Grid. They have some more examples, downloads, and probably best a photoshop template.

About Shane

Hi I am Shane the main author of this blog. I am a self taught web developer. I have been working in this industry since 2008. I work a lot with WordPress, Magento, SEO & SEM, and custom built websites. I love all sports and I will try anything at least twice.

Working remotely is one of the fastest growing perks in the working world. It’s something that people talk about a lot, and it’s a solution to the “work/life balance” problem that bothers so many people. Most of us have asked the question, “Why do I work so hard?” For some people, there are many sides

Know little about the use of keylogger for Android? Wondering why so many friends choose free Android spy? What benefits can you get from tracking cell phones of your children and employees with the help of sms tracker? Keep reading and find the answers in this short article. Have you ever dreamed of taking control

As a photographer whether it be a hobby or on a professional level the realm of high dynamic range photography can be very troublesome without photo editing software specifically made for photo HDR. Aurora HDR photography can be very challenging as it is, but with Aurora the job gets a little bit easier. Some might

  • bobby

    Hi,

    I v some cols on my grid that contain a background image. On resizing, at a certain point the imgage dissappears. Any idea how to fix that. It also happens on this site, resize and your adds dissappear, also on the 1140 cssgrid site the download button background image dissappears

    • Hey Bobby

      On this site and the 1140 site these spots disappear with a display none when the browser resolution gets low. Check the bottom of your style sheet for a display none on the element you are talking about.

  • Jim

    Hi Shane,

    Yes, I see the @media handheld section of 1140.css, however there is nothing in there for the #download DIV.

    When the browser window is greater then 767px the CSS in Firebug is “display: none” for #download, but the Download image still appears. It only disappears when the window is resized below 767px, yet it appears that nothing in the CSS changes. That leads me to believe that the javascript program that comes with 1140px is causing the image to disappear, however the only code in the css3-mediaqueries.js program that deals with “display” is IE related (ua.ie).

    I can see how, if I wanted to duplicate this, I could do it in the “@media handheld” block of code, however, it does not seem like it is being done this way, as there is no “display: none” in the “handheld” code.

    I am missing something.

    Jim

    • OK Jim I get what you have going on. If you are searching in firebug you will not see the display: none unless your browser is under 767px. When your browser is over 767px you will get this code:
      #download {
      background: url(“../img/downloadbg.png”) repeat scroll 0 0 #5BD698;
      border-radius: 5px 5px 5px 5px;
      height: 236px;
      position: relative;
      text-align: center;
      top: 25px;
      width: 212px;
      }
      But once your browser get below 767px they take out the download image and link by display none. So inside the media less than 767px they would put this:
      #download { display:none; }
      This way the download button shows up, until you are on a smaller screen/browser. You can see this happening in my site with my sidebars. Once you get to a certain size I hide them.

  • Jim

    Hi Shane,

    I had the same question as Frank Los with regard to the disappearing DOWNLOAD image (on the cssgrid.net site).

    Why is it that the download image disappears but the LOGO image does not? Also, the “Fingers of God” image remains in the browser window.

    In FireBug I see the following style (regardless of the window size):

    #download {
    display: none;
    }

    Why doesn’t this override the other #download styles when the window is wider than 767px?

    Is the JavaScript creating this style when the window goes below 767px, thus removing the image? If that is the case, how does the image reappear when it goes back over 767px – I notice that the “display:none” does not go away when the window is enlarged.

    Thanks in advance!

    Jim

    • Hey Jim

      What is happening is at the bottom of the css you will find the code that checks for the size of the browser window. It should look something like this:

      @media handheld, only screen and (max-width: 767px) {
      body {}
      }

      What you need to do is start building out your site and then setup your small screen and mobile views for the site. With a little bit of customization to the grid you can make it work for every phone and if you really wanted to you could setup every standard screen size.

  • MC

    Hi Shane – I see you adjusted the grid to be a much better right margin of 2%. I’ve helped myself to the new percentages :D, hope you dont mind :). Thanks!

    A little comment about the site, i find the serif font isnt quite working and I think we need a bit of an increase in the line height so things dont look so squished.. 🙂

    • Hey MC, Thanks for the comment and no problem with the new percentages. I found them to be a little much at the original size. Thanks for the input on the site also I do need to update the sites fonts.

  • Hi,

    I v some cols on my grid that contain a background image. On resizing, at a certain point the imgage dissappears. Any idea how to fix that. It also happens on this site, resize and your adds dissappear, also on the 1140 cssgrid site the download button background image dissappears.

    • Hey Frank
      It is because of the fluid feel. Basically once you get down to mobile/ipad size things will go away. Like if you look at this site in a phone all you will see is the posts, logo, and nav. If you take a look at the bottom of your styles you will see some mobile code in there, there is probably a line that turns the image section to display: none;. If you want send me the url and I will take a look at it and see.

  • Vic Dinovici

    Thanks for sharing 🙂

    You repeat yourself here For instance you could use 3col, 6col, and 3col and here That means in the area that you are coding you would have 3 columns that span 3/12, 6/12, and 3/12.