Grid > Div > Element

A Grid is a way of creating liquid layouts without the headache of using CSS styles. The grid dynamically resizes itself based on the height width rules that you set up. This is very good for layouts that constantly changing when a window is resized or when you cannot spend a lot of time setting up the CSS to do this. Below is a setup example:

<div class="grid" style="height: 100%">
    <div class="row" gridheight="*">
        <div class="cell" gridwidth="50%"></div>
        <div class="cell" gridwidth="50%"></div>
    </div>
    <div class="row" gridheight="25%">
        <div class="cell" gridwidth="100%"></div>
    </div>
    <div class="row" gridheight="10">
        <div class="cell" gridwidth="50%"></div>
        <div class="cell" gridwidth="50%"></div>
    </div>
</div>

Requires

Awesome

Sizing Attributes

The Grid uses a flexible sizing method for truly liquid layout capabilities. There are specific rules for building grids:

  • Divs with class "grid" must have div children with class "row"
  • Divs with class "row" must have div children with class "cell"

The number of cells does not have to match for each row and the grid does not have to take up the full space of the screen. For rows, you can only set the "height", for cells you can only set the "width". There are three different sizing methods:

  • Static
  • Relative
  • Liquid

If no gridwidth or gridheight is set, liquid "*" is defaulted.

Static

Static sizing is represented by number and is a direct pixel amount. These have the highest order of priority.

Relative

Relative sizing is represented by a percent. This is a portion of the full width available.

Liquid

Liquid sizing is represent by a single "*". This indicates that the remaining available amount of space should be allocated to this row/cell. If more than one row/cell has this sizing, then the remaining availability is divided evenly among the children.

Calculate Sizes

Each sizing method has an order of priority. Static sizing always gets calculated first. A width or height of 200 will always get that value in pixels. Next is the relative sizing. After that is the liquid sizing. If a row has a width of say 400 px and it has 3 cells with a width of 100, 30% and * respectively, the widths would calculate as follows:

  • gridwidth="100" –> 100px
  • gridwidth="30%"—>120px
  • gridwidth="*"—>180px

If the parent div tag were to resize, the widths would recalculate accordingly, with the liquid sizes always getting the remaining amount distributed to them.

One thing to note, every grid, gridrow and gridcell has a border-sizing style of “border-box” applied to it programmatically to keep the sizing methods coherent and predictable.

Example

<head id="Head1" runat="server">
    <style>
        html, body
        {
            width: 100%;
            height: 100%;
            margin: 0px;
            overflow: hidden;
        }
        
        .cell
        {
            border: 1px solid blue;
        }
    </style>
    <title></title>
    <script type="text/javascript" src="/scripts/Awesome.js"></script>
    <script type="text/javascript" src="/scripts/AwesomeGrid.js"></script>
</head>
<body>
    <div class="grid" style="height: 100%">
        <div class="row" gridheight="125">
            <div class="cell" gridwidth="100">height: 125px, width: 100px</div>
            <div class="cell" gridwidth="*">height: 125px, width: *</div>
        </div>
        <div class="row" gridheight="*">
            <div class="cell" gridwidth="10%">height: *, width: 10%</div>
            <div class="cell" gridwidth="*">height: *, width: *</div>
            <div class="cell" gridwidth="*">height: *, width: *</div>
        </div>
    </div>
</body>
</html>

 

This code will produce the following layout:

grid2

When the browser is resized, we get the following:

grid

Note that the upper left cell remains at 100px and the upper row remains at 125px. The lower left cell is still 10% while the bottom right cells continue to split the remaining space between them.

Last edited Oct 25, 2011 at 1:10 PM by dahrkdaiz, version 2

Comments

No comments yet.