Sistema de columnas con flexbox

EDgrid es una librería para construir layouts. Puede construirlos con Flexbox o CSS Grid.

ed-container y ed-item

Para construir layouts con Flexbox y EDgrid debe definir contenedores con la clase ed-container e items con la clase ed-item. Con las siguientes reglas:

  1. Un ed-item no puede ser huérfano. Siempre debe ser hijo de un ed-container
  2. Un ed-container debe tener al menos un ed-item como hijo directo.
  3. Los ed-container y ed-item son contenedores para crear layout. No agregue contenido directamente en ellos.
<!-- Bien -->
<div class="ed-container">
    <div class="ed-item">
        <article>
            <p>
                En un lugar de la Mancha, de cuyo nombre no quiero acordarme,
                no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,
                adarga antigua, rocín flaco y galgo corredor.
            </p>
        </article>
    </div>
</div>

<!-- Mal -->
<div class="ed-container">
    <article class="ed-item">
        En un lugar de la Mancha, de cuyo nombre no quiero acordarme,
        no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,
        adarga antigua, rocín flaco y galgo corredor.
    </article>
</div>

Ancho de los ed-container

Los ed-container tienen un ancho predeterminado de 100% y un ancho máximo de 1200px. Así cuando la pantalla es mayor a esta medida, el ed-container queda fijo y se centra horizontalmente.

Si desea un ed-container que mida siempre el 100% de la pantalla agregue la clase full.

<div class="ed-container full">
    <div class="ed-item"></div>
</div>

Si desea personalizar el ancho máximo del ed-container redefina la variable Sass $max-width antes de importar EDgrid.

$max-width: 1400px;
@import "~ed-grid/ed-grid";

Ancho de los ed-item

Cada ed-item tiene 100% del ancho de su padre a menos que se especifique lo contrario (a través de clases). Las clases para definir el ancho son de dos tipos: porcentajes y fracciones.

1. Porcentajes

La nomenclatura de clase es breakpoint-numero Donde número es cualquier número múltiplo de 5 entre 0 y 100. Así que la clase lg-75 significa que el elemento tendrá 75% del ancho de su padre a partir del breakpoint lg.

<div class="ed-container">
    <div class="ed-container">
      <div class="ed-item s-30 lg-50">1</div>
      <div class="ed-item s-50 lg-25">2</div>
      <div class="ed-item s-20 lg-25">3</div>
    </div>
</div>
1
2
3
  • Como puede ver, las separaciones entre columnas se crean con paddings laterales.
  • Si no desea separaciones con paddings (que dan problemas en layouts complejos) use nuestra versión con CSS Grid
  • Si la suma de los anchos da más de 100, habrá saltos de fila. Así puede crear layouts más complejos sin crear nuevos contenedores.

2. Fracciones

Si quiere dividir el ancho entre 3 o 6 necesitará fracciones. La nomenclatura es breakpoint-numerador-denominador. Por ejemplo: lg-1-3 significa un tercio de ancho (33.33%) a partir del breakpoint lg (1024px). Mientras que xl-2-3 significa dos tercios a partir del breakpoint xl (1440px).

<!-- Layout de tres columnas a partir de 1024px de pantalla -->
<div class="ed-container">
    <div class="ed-item s-1-3">1</div>
    <div class="ed-item s-1-3">2</div>
    <div class="ed-item s-1-3">3</div>
</div>
1
2
3

Anidar contenedores e items

Si necesita anidar elementos para crear layouts más complejos tenga en cuenta las siguientes reglas:

  1. No cree un ed-container como hijo de un ed-item
  2. Para anidar, agregue la clase ed-container a un ed-item entonces ya podrá crear nuevos ed-item nietos.
<!-- Bien -->
<div class="ed-container">
    <div class="ed-item s-60">1</div>
    <div class="ed-item s-40 ed-container">
        <div class="ed-item s-50">2</div>
        <div class="ed-item s-50">3</div>
    </div>
</div>

<!-- Mal -->
<div class="ed-container">
    <div class="ed-item s-1-3"></div>
    <div class="ed-item s-2-3">
        <div class="ed-container">
            <div class="ed-item s-50"></div>
            <div class="ed-item s-50"></div>
        </div>
    </div>
</div>
1
2
3

Avanzado: crea tus propios contenedores e items

Si no desea usar las clases ed-container y ed-item puede definir las suyas. Simplemente redefina las variables $container y $item antes de importar EDgrid.

$container: row;
$item: column;
@import "~ed-grid/ed-grid";

Avanzado: crear contenedores e items con Sass (sin clases HTML)

Si no desea tocar el marcado HTML (o no tiene acceso a el por restricciones del proyecto) puede usar mixins de Sass para definir sus contenedores e items.

  • Para los contenedores, use el mixin ed-container.
  • Para los items, use el mixin ed-item($s,$m,$lg,$xl) Los parámetros definen el ancho en cada breakpoint:
  • Puede omitirlos todos y el ancho será siempre 100%
  • Un ancho declarado se herederá en los breakpoints superiores.
  • Puede usar fracciones como parámetro. Por ejemplo: 1/3
.main-page {
@include ed-container
}

.sidebar {
@include ed-item(100,100,1/3)
}

.content {
@include ed-item(100,100,2/3)
}