CSS

Creating Simple Fluid Grids

Posted on by

I’ve seen/heard of  a lot of people who have struggled getting the fluid grid down. In my opinion, the key to creating a solid grid system is by just keeping it simple. There’s really no secret fancy CSS technique that allows you to create a grid. There’s a couple of rules I always follow that make my life a million times easier when coding gird..

  • Use border-box for easier calculations for percentages
  • Use float:left; to keep your columns inline
  • Use percentages for your margins and padding to prevent your grid from breaking

We’re going to create a full column with a couple columns nested within it. Let’s get started by writing some HTML for our grid system.

HTML


<div class="row">
    <div class="col">
        <h2>Full Column with nested columns</h2>
        <div class="col half">
            <h2>Half Column</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lectus quis urna consequat sollicitudin. Sed quis diam magna, ut adipiscing ipsum. Cras tincidunt sapien at lectus vulputate blandit pulvinar nunc vulputate. Mauris gravida augue quis erat pulvinar facilisis a vel eros.</p>
        </div>
     <div class="col quarter">
           <h2>Quarter Column</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lectus quis urna consequat sollicitudin. Sed quis diam magna, ut adipiscing ipsum. Cras tincidunt sapien at lectus vulputate blandit pulvinar nunc vulputate. Mauris gravida augue quis erat pulvinar facilisis a vel eros.</p>
     </div>

       <div class="col quarter">
           <h2>Quarter Column</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lectus quis urna consequat sollicitudin. Sed quis diam magna, ut adipiscing ipsum. Cras tincidunt sapien at lectus vulputate blandit pulvinar nunc vulputate. Mauris gravida augue quis erat pulvinar facilisis a vel eros.</p>
      </div>
    </div>
</div><!--end full column with nested columns-->

As you can see, I created a few classes that describe exactly which each div is meant for. “Row” is going to be the full row, “col” will be each column, and “half” and “quarter” describe what width they will be. The reason I’ve separated in to these classes is because “col” is going to have some global styles applied to it that every single column will need, so it’s much more efficient to only write it once in the CSS and reserve anything that has to do with the width of the column to “quarter” or “half” or whatever width you want your column to be.

Let’s get in to the CSS and make this a fluid grid. Here are the styles applied to the rows and each column.

CSS


* { 
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.row {
  margin:30px auto;
  width:80%;
}

.col {
  background:#efefef;
  border:1px solid #bbb;
  box-shadow:0px 0px 3px rgba(0,0,0,.4);
  float:left;
  padding:1%;
  margin:1%;

}

This is going to style our row and all of our columns. All that is left to do is set the widths for each column.

CSS


.half {
  width:47.5%;
}

.quarter {
  width:22.75%;
}

There you have it. You have a fluid grid with just a few lines of CSS. Then, of course you can take it a step further and make it a bit more responsive with a media query to make your columns full width at a certain screen size…

CSS


@media (max-width: 800px) {

    .row {
        width:95%;
    }

    .half, .quarter {
        width:97%;
    }
}

If you’d like to view a more extensive demo, I’ve created a CodePen with even more columns and rows based off the code in this article.

View Full Demo

Leave a Reply