PocketGrid: Grid Layout with fixed width navigation column

问题

I just found this very interesting Grid Framework: PocketGrid.

It's interesting beacuse it is only css, no html classes to define object width (so it totally respects principle about separation between content and style, defined for html+css specs), and it's minimal.

There are several example of it's power onto the link but.... I didn't find one of the most interesting: possibility to have a fixed width of a column (i.e. Navigation one) sided by another one that instead spans on all remaining horizonal space....

I found this link How do I float two divs side-by-side without specifying a width? but it does not run if I have an header (floated due to Grid layout) above navigation and content.

Please, could you help me?

回答1:

I'm the author of PocketGrid.

I made a JSFiddle example for your problem: http://jsfiddle.net/arleray/4ZU64/

It uses the "overflow:hidden" trick to make the main block fluid between 2 fixed-width sidebars!

HTML:

<div class="block-group">
    <div class="header block">Header</div>
    <div class="left-sidebar block">Left sidebar (fixed width)</div>
    <div class="right-sidebar block">Right sidebar (fixed width)</div>
    <div class="main block">Main (fluid)</div>
    <div class="footer block">Footer</div>
</div>

CSS:

.left-sidebar { width: 200px; }

.right-sidebar { width: 200px; float: right; }

.main {
    overflow: hidden;
    float: none;
    width: auto;
    min-width: 1px;
}

The drawback is that you need to declare the sidebar blocks before the main block...

Hope this helps!

回答2:

I'm quite new to PocketGrid, as I'm just discovering it today. So please forgive me if I'm abusing your grid framework...

Here's one alternate approach, not requiring the use of calc(), and allowing you to markup your main content before the sidebars, or in any order you like.

This requires one extra container div containing the main block and sidebars. This container div is positioned relative to allow the absolute positioning of the 2 fixed-width sidebars.

The HTML:

<div class="block-group">
    <div class="header block">
        <div class="box">Header</div>
    </div>
    <div class="middle block block-group">
        <div class="main block">
            <div class="box">Main<br/>(fluid)</div>
            <div class="box">Main<br/>(fluid)</div>
            <div class="box">Main<br/>(fluid)</div>
            <div class="box">Main<br/>(fluid)</div>
            <div class="box">Main<br/>(fluid)</div>
        </div>
        <div class="left-sidebar block">
            <div class="box">Left sidebar<br/>(fixed width)</div>
        </div>
        <div class="right-sidebar block">
            <div class="box">Right sidebar<br/>(fixed width)</div>
        </div>
    </div>
    <div class="footer block">
        <div class="box">Footer</div>
    </div>
</div>

The CSS:

/* Smartphone version
   Nothing to do: blocks are stacked by default. */

.middle {
    position: relative;
}

/* Tablet version */
@media (min-width: 600px) {
  .left-sidebar { width: 200px; position: absolute; left: 0; top: 0; bottom: 0; }

  .right-sidebar { width: 200px; position: absolute; right: 0; top: 0; bottom: 0; }

  .main {
    overflow: hidden;
    float: none;
    width: auto;
    min-width: 1px;
    margin: 0 200px;
  }
}

.main .box { background-color: #CFD; }
.left-sidebar .box, .right-sidebar .box { background-color: #CDF; }

Also on jsfiddle.

来源：https://stackoverflow.com/questions/21118115/pocketgrid-grid-layout-with-fixed-width-navigation-column

标签

css

grid-layout

pocketgrid