Columns

Organiza tus elementos en filas y columnas usando el sistema de utilidades is-row e is-col-{n}. Este sistema está basado en 12 columnas, lo que te permite construir layouts flexibles y consistentes.

Uso básico

Envuelve tus columnas dentro de un contenedor con la clase is-row y define el ancho de cada elemento usando is-col-{n}, donde {n} es un número de 1 a 12.

Clase	Descripción
is-col-1	Ocupa 1/12 del ancho (≈ 8.33%)
is-col-6	Ocupa 6/12 del ancho (50%)
is-col-12	Ocupa 12/12 del ancho (100%)

Col 12

Col 8

Col 4

Col 3

Col 3

Col 3

Col 3

Col 7

Col 3

Col 6

Col 6

<div class="is-row">
  <div class="is-col-12 is-bg-primary">Col 12</div>
  <div class="is-col-8 is-bg-primary">Col 8</div>
  <div class="is-col-4 is-bg-info">Col 4</div>
  <div class="is-col-3 is-bg-warning">Col 3</div>
  <div class="is-col-3 is-bg-error">Col 3</div>
  <div class="is-col-3 is-bg-warning">Col 3</div>
  <div class="is-col-3 is-bg-error">Col 3</div>
  <div class="is-col-7 is-bg-primary">Col 7</div>
  <div class="is-col-3 is-bg-info">Col 3</div>
  <div class="is-col-6 is-bg-warning">Col 6</div>
  <div class="is-col-6 is-bg-error">Col 6</div>
</div>

Espaciado entre columnas

El espaciado entre las columnas se controla con la clase is-gap-{n} donde {n} es un número de 0 a 10.

Preview

Col 12

Col 8

Col 4

Col 3

Col 3

Col 3

Col 3

Code

<div class="is-row is-gap-6">
  <div class="is-col-8 is-bg-primary">Col 8</div>
  <div class="is-col-4 is-bg-info">Col 4</div>
  <div class="is-col-3 is-bg-warning">Col 3</div>
  <div class="is-col-3 is-bg-error">Col 3</div>
  <div class="is-col-3 is-bg-warning">Col 3</div>
  <div class="is-col-3 is-bg-error">Col 3</div>
</div>

Responsive

tip

For more detail visit the documentation of breakpoints

Examples

Class	Description
.md:is-col-6	Sets the component's width to a 6/12 ratio for screens larger than md.
.is-col-12 .md:is-col-4	Sets the component's width to a 12/12 ratio (i.e., 100%) for mobile screens and a 4/12 ratio when the screen is larger than md.