The Greed

Sistema de rejillas para maquetar. Para la documentación completa visita FlexBox Grid. La sintaxis varía levemente:

<div class="grid">
  <div class="row">
    <div class="col xs-12 m-6 l-4">A</div>
    <div class="col xs-12 m-6 l-4">B</div>
    <div class="col xs-12 m-6 l-4">C</div>
    <div class="col xs-12 m-6 l-4">D</div>
    <div class="col xs-12 m-6 l-4">E</div>
    <div class="col xs-12 m-6 l-4">F</div>
  </div>
</div>

Responsive classes

Cada una de las columnas del greed tiene una o más clases responsivas. Estas clases se prefijan con un breakpoint (xs-, s-, m-, l-, xl-) y se sufijan con un número (del 1 al 12 por defecto, pero esto lo puedes configurar).

Breakpoint prefix

Los prefijos representan un breakpoint, y aplican para cualquier dimensión de pantalla superior al mismo. Los prefijos pueden ser:

• xs: abarca todas las pantallas.
• s: abarca las pantallas mayores a 650px de ancho.
• m: abarca las pantallas mayores a 985px de ancho.
• l: abarca las pantallas mayores a 1300px de ancho.
• xl: abarca las pantallas mayores a 1675px de ancho.

Estos prefijos los puedes configurar usando la variable @grid-col-names y @grid-col-breaks en el archivo grid.less. La prioridad es creciente, es decir, si se incluyen dos clases con distintos prefijos, tendrá precedencia la clase menos restrictiva que cumpla con las condiciones de la pantalla.

Size suffix

Los sufijos son números que representan el tamaño que la columna ocupará. Los sufijos van del número 1 (significando que la columna ocupará 1/12 del ancho del contenedor) hasta el 12 (significando que la columna ocupará 12/12 del ancho del contenedor). La cantidad de columnas se puede configurar usando la variable @grid-columns en el archivo grid.less.

Entonces, el ejemplo anterior se renderizará así:

Render en pantallas pequeñas (0 - 985px) xs-12

Render en pantallas medianas (985px - 1300px) m-6

Render en pantallas grandes (1300px - ) l-4

Offsets

Permiten posicionar cualquier columna en un lugar específico del grid, no necesariamente en el que le correspondería:

<div class="grid">
    <div class="row">
        <div class="col xs-12 m-6 l-4 off-m-6 off-l-8">
            A
        </div>

        <div class="col xs-12 m-6 l-4">
            B
        </div>

        <div class="col xs-12 m-6 l-4">
            C
        </div>
    </div>
</div>

Los offsets proveen una sintaxis de prefijos y sufijos similar a la de las columnas.

Render en pantallas pequeñas (0 - 985px) no offset

Render en pantallas medianas (985px - 1300px) off-m-6

Render en pantallas grandes (1300px - ) off-l-8

Horizontal Alignment

<div class="grid">
    <div class="row center-m end-l start-xs">
        <div class="col xs-6">
            Start
        </div>
    </div>

    <div class="row center-xs end-m start-l">
        <div class="col xs-6">
            Center
        </div>
    </div>

    <div class="row center-l end-xs start-m">
        <div class="col xs-6">
            End
        </div>
    </div>
</div>

Render en pantallas pequeñas (0 - 985px)

Render en pantallas medianas (985px - 1300px)

Render en pantallas grandes (1300px - )

Vertical Alignment

<div class="grid">
    <div class="row top-xs middle-m bottom-l">
        <div class="col">
            Ref
        </div>

        <div class="col">
            Top
        </div>
    </div>

    <div class="row middle-xs top-l bottom-m">
        <div class="col">
            Ref
        </div>

        <div class="col">
            Middle
        </div>
    </div>

    <div class="row bottom-xs middle-l top-m">
        <div class="col">
            Ref
        </div>

        <div class="col">
            Bottom
        </div>
    </div>
</div>

Render en pantallas pequeñas (0 - 985px)

Render en pantallas medianas (985px - 1300px)

Render en pantallas grandes (1300px - )

Autowidth

El grid permite auto-ajustar el tamaño de sus columnas si no especificas el tamaño y los breakpoints manualmente:

<div class="grid">
        <div class="row">
            <div class="col">
                1
            </div>
            <div class="col">
                2
            </div>
            <div class="col">
                3
            </div>
            <div class="col">
                4
            </div>
        </div>

        <div class="row">
            <div class="col">
                1
            </div>
            <div class="col">
                2
            </div>
        </div>

        <div class="row">
            <div class="col">
                1
            </div>
            <div class="col">
                2
            </div>
            <div class="col">
                3
            </div>
            <div class="col">
                4
            </div>
            <div class="col">
                5
            </div>
            <div class="col">
                6
            </div>
            <div class="col">
                7
            </div>
            <div class="col">
                8
            </div>
        </div>
    </div>

Render

Full Height Frames

<body>
    <div class="grid frame">
        <div class="row">
            <div class="col xs-3">
                A
            </div>

            <div class="col xs-3">
                B
            </div>

            <div class="col xs-3">
                C
            </div>

            <div class="col xs-3">
                D
            </div>
        </div>
    </div>
</div>