Flexgrid layouts

We want to be able to structure any website with a good layout model, not just Wordpressy ones. How about a classic 40-60 split?

Markup

<div class="flex-row">
  <div class="flex-cell fixed40">40%</div>
  <div class="flex-cell">60%</div>
</div>

Result

40%
60%

With a slight alteration, we can specify a percent width to a "flex-cell" element. Flexgrid includes definitions for "fixed10" (10% width) all the way up to "fixed100" (100% width) in 10% increments. Additionally, there's "fixed25", "fixed33", "fixed66" and "fixed75".

Notice that when you define fixed cells in a flex-row you should always leave at least one cell without a fixed width. Since cells auto-expand to fill the space, you'll always end up with what you're looking for in a cross-browser compatible way when you do this. Here's an example of what I'm talking about.

Markup

<div class="flex-row">
  <div class="flex-cell fixed10">10%</div>
  <div class="flex-cell">whatever's left over (80%)</div>
  <div class="flex-cell fixed10">10%</div>
</div>

Result

10%
whatever's left over (80%)
10%

You may have noticed by resizing the window that the two 10% cells take up more than 10% on smaller screens. That's simply because I added a fixed 40px of padding on them. Interestingly enough, the model still works well even though I'm mucking it up the best I can.

Spacing

While flexgrid comes with a sweet "flex-row spaced" class to help keep neatly spaced cells, you may want your own custom spacing between cells. No problem. You can just add dummy "flex-cell" elements with whatever width you want.

Markup

<div class="flex-row">
  <div class="flex-cell">1</div>
  <div class="flex-cell fixed10"></div>
  <div class="flex-cell">2</div>
</div>

Result

1
2

One more thing

Sometimes you just want a container that is exactly the size it needs to be to keep its contents. That's where "flex-cell fixed" comes in. A cell with this class will always be exactly as big as it needs to be to hold its children. In the case of a logo or a few words, that's pretty handy.

Markup

<div class="flex-row spaced vertical-center">
  <div class="flex-cell fixed">
    <img src="logo.png">
  </div>
  <div class="flex-cell">
    <nav>
      <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Contact</li>
      </ul>
    </nav>
  </div>
  <div class="flex-cell fixed">
    <div class="flex-row vertical-center">
      <div class="flex-cell">
        <input type="text" placeholder="search">
      </div>
      <div class="flex-cell fixed">
        <button>Search</button>
      </div>
    </div>
  </div>
</div>

Result

The logo on the left is wrapped in a "flex-cell fixed" element as is the search. This leaves all the rest of the space for the nav.

If you read the markup you also noticed that the search box and button were contained in a nested "flex-row" as well. Yes, you can nest these things until the cows come home to create very detailed layouts for whatever you need.

You win bonus points if you noticed the "flex-row vertical-center" elements. That class prevents the "flex-cell" elements from being the same height and instead vertically aligns them. Notice how the nav items are vertically centered with the logo and search box? Now maybe in this example that isn't what you want. That's fine. You can put a "flex-row vertical-bottom" instead. Give it a try. You'll be amazed at the vertical alignment possibilities that flexgrid offers without any fixed heights or ridiculous javascript.

Sexy.

Download