Grids

Sistema de columnas

eb-grid Beta

Nuestro sistema de columnas es similar al de Bootstrap, con la diferencia de que se basan en la propiedad Grid. Usamos doce columnas (fracciones) para dividir el contenido.

Code

Mobile Tablet Desktop

          
          <div class="eb-grid gap:md">
            <div class="col:12 md-col:6 lg-col:4">A</div>
            <div class="col:12 md-col:6 lg-col:4">B</div>
            <div class="col:12 md-col:12 lg-col:4">C</div>
          </div>

Code

          
          <div class="eb-grid">
            <div class="col:3 nombre">Pablo</div>
            <div class="col:2 apellido">Nunez</div>
            <div class="col:5 sexo">Mucho</div>
            <div class="col:2 crush">Omar</div>
          </div>

En este ejemplo usamos las doce columnas: primer contenedor 3 + 2 + 5 + 2 = 12.

Breakpoints

Podemos asignar distinta distribución de columnas según el breakpoint. La fórmula está basada en Mobile first, esto quiere decir que cada clase modificadora asignará la estructura del grid a partir del ancho mínimo del target.

Breakpoints

Layouts

	Mobile	Tablet	Desktop
Clase	col:*	md-col:*	lg-col:*
Breakpoint	⁺0px	⁺768px	⁺1024px

Posicionamiento

Alineación

Gracias a que es una grilla flexbox, tenemos la opción de alinear el contenido de manera independiente. La estructura de la clase utilitaria se componente así: flex:[align]-[justify].

La clase utilitaria flex:column cambia la dirección de row a column los elementos flex.

POS	Class	Resultado
	flex	Alinear al inicio
	flex:end	Alinear al final
	flex:center	Centrar
	flex:center-top	Centrar arriba
	flex:center-bottom	Centrar abajo
	flex:center-left	Centrar izquierda
	flex:center-right	Centrar derecha
	flex:left-bottom	Alinear a la izquierda y abajo
	flex:left-top	Alinear a la izquierda y arriba
	flex:right-bottom	Alinear a la derecha y abajo
	flex:right-top	Alinear a la derecha y arriba
	flex:between	Justificar entre elementos
	flex:center-between	Centrar entre elementos

Code

start

center

end

center-top

center-bottom

center-right

          
          <div class="eb-grid">
            <div class="col:2 flex:start">flex:start</div>
            <div class="col:2 flex:center">flex:center</div>
            <div class="col:2 flex:end">flex:end</div>
            <div class="col:2 flex:center-top">flex:center-top</div>
            <div class="col:2 flex:center-bottom">flex:center-bottom</div>
            <div class="col:2 flex:center-right">flex:center-right</div>
          </div>

Gap

Podemos asignar el espaciado entre columnas y filas utilizando la clase utilitaria gap:*. Aunque es una clase utilitaria, es necesario que el elemento en el que se declare esta propiedad tenga display grid o flex.

Clase	REM	Pixeles
gap:025	0.25rem	4px
gap:033	0.33rem	5px
gap:50	0.50rem	8px
gap:075	0.75rem	12px
gap:100	1rem	16px
gap:125	1.25rem	20px
gap:150	1.50rem	24px
gap:175	1.75rem	28px
gap:200	2rem	32px
gap:250	2.5rem	40px
gap:300	3rem	48px

	Mobile	Tablet	Desktop
Clase	gap:*	md-gap:*	lg-gap:*
Breakpoint	⁺0px	⁺768px	⁺1024px

Code

Item

          
          <div class="eb-grid gap:150">
            <div class="grid col:3 flex:center">Item</div>
            <div class="grid col:3 flex:center">Item</div>
            <div class="grid col:3 flex:center">Item</div>
            <div class="grid col:3 flex:center">Item</div>
          </div>