Small Grid CSS Library

Usando la clase .flex y el atributo [autofill]

20 Cols
C1
C2
C1
C2
C3
C1
C2
C3
C4
C1
C2
C3
C4
C5
C1
C2
C3
C4
C5
C6
C1
C2
C3
C4
C5
C6
C7
C1
C2
C3
C4
C5
C6
C7
C8
C1
C2
C3
C4
C5
C6
C7
C8
C9
C1
C2
C3
C4
C5
C6
C7
C8
C9
C10
C1
C2
C3
C4
C5
C6
C7
C8
C9
C10
C11
C1
C2
C3
C4
C5
C6
C7
C8
C9
C10
C11
C12
C1
C2
C3
C4
C5
C6
C7
C8
C9
C10
C11
C12
C13
C1
C2
C3
C4
C5
C6
C7
C8
C9
C10
C11
C12
C13
C14
C1
C2
C3
C4
C5
C6
C7
C8
C9
C10
C11
C12
C13
C14
C15
C1
C2
C3
C4
C5
C6
C7
C8
C9
C10
C11
C12
C13
C14
C15
C16
C1
C2
C3
C4
C5
C6
C7
C8
C9
C10
C11
C12
C13
C14
C15
C16
C17
C1
C2
C3
C4
C5
C6
C7
C8
C9
C10
C11
C12
C13
C14
C15
C16
C17
C18
C1
C2
C3
C4
C5
C6
C7
C8
C9
C10
C11
C12
C13
C14
C15
C16
C17
C18
C19
C1
C2
C3
C4
C5
C6
C7
C8
C9
C10
C11
C12
C13
C14
C15
C16
C17
C18
C19
C20

Usando la clase .flex sin el atributo [autofill]

20 Cols
C1
C2
C1
C2
C3
C1
C2
C3
C4
C1
C2
C3
C4
C5

El atributo [clearfix] permite establcer un ancho fijo cuando habilitas el autofill

C1
C2
[clearfix] con width 50%
C4
C5

Define un ancho especifico Usando las clases .base del 1 al 20

25% de ancho coloca la clase .base5
clase half = 50% ancho
clase half = 50% ancho

Un número del 1 al 20 multiplicado por .5 retorna el ancho en porcentaje

base6 = 6x5 = 30% de ancho
base6 = 6x5 = 30% de ancho
base8 = 8x5 = 40% de ancho

La clase .nowrap evita el salto de linea

base6 = 6x5 = 30% de ancho
base6 = 6x5 = 30% de ancho
base8 = 8x5 = 40% de ancho
C1
C2
C3
C4
C1
C2
C3
C4
C5

Grid CSS | Alignment

centrado absoluto con .center

C1
C2
C3
C4
C5

centrado vertical con .center-v

C1
C2
C3
C4
C5

centrado horizontal con .center-h

C1
C2
C3
C4
C5

Distribucion de espacio con .distributed

C1
C2
C3
C4
C5

Separar items con .separated

C1
C2
C3
C4
C5

Alinear arriba con .top

C1
C2
C3
C4
C5

Alinear abajo con .bottom

C1
C2
C3
C4
C5

Alinear derecha con .right

C1
C2
C3
C4
C5

Cambiar flujo a columnas con .column

C1
C2
C3
C4
C5