Grid Item

<gstock-grid-item> | GstockGridItem

Examples

Básico

Los elementos de grid se definen usando gstock-grid-item dentro de un gstock-grid. El atributo span determina cuántas columnas ocupa el elemento.

Grid Item - span="12"

Este elemento ocupa las 12 columnas completas del grid (ancho completo).

Grid Item - span="6"

Este elemento ocupa 6 columnas (mitad del grid).

Grid Item - span="6"

Este elemento también ocupa 6 columnas.

Grid Item - span="4"

Un tercio del grid (4 de 12 columnas).

Grid Item - span="4"

Un tercio del grid.

Grid Item - span="4"

Un tercio del grid.

<gstock-grid type="fluid">
  <gstock-grid-item span="12">
    <gstock-card>
      <div slot="header">Grid Item - span="12"</div>
      <p>Este elemento ocupa las 12 columnas completas del grid (ancho completo).</p>
    </gstock-card>
  </gstock-grid-item>

  <gstock-grid-item span="6">
    <gstock-card>
      <div slot="header">Grid Item - span="6"</div>
      <p>Este elemento ocupa 6 columnas (mitad del grid).</p>
    </gstock-card>
  </gstock-grid-item>

  <gstock-grid-item span="6">
    <gstock-card>
      <div slot="header">Grid Item - span="6"</div>
      <p>Este elemento también ocupa 6 columnas.</p>
    </gstock-card>
  </gstock-grid-item>

  <gstock-grid-item span="4">
    <gstock-card>
      <div slot="header">Grid Item - span="4"</div>
      <p>Un tercio del grid (4 de 12 columnas).</p>
    </gstock-card>
  </gstock-grid-item>

  <gstock-grid-item span="4">
    <gstock-card>
      <div slot="header">Grid Item - span="4"</div>
      <p>Un tercio del grid.</p>
    </gstock-card>
  </gstock-grid-item>

  <gstock-grid-item span="4">
    <gstock-card>
      <div slot="header">Grid Item - span="4"</div>
      <p>Un tercio del grid.</p>
    </gstock-card>
  </gstock-grid-item>
</gstock-grid>

<script type="module">
  customElements.whenDefined('gstock-grid-item').then(() => {
    
    const items = document.querySelectorAll('gstock-grid-item');

    console.log('=== GRID ITEMS DEBUG ===');
    items.forEach((item, index) => {
      const styles = getComputedStyle(item);
      console.log(`Item ${index + 1}:`, {
        'span attribute': item.getAttribute('span'),
        'has span attribute': item.hasAttribute('span'),
        'grid-column': styles.gridColumn,
        'grid-column-start': styles.gridColumnStart,
        '--gstock-grid-item-span': styles.getPropertyValue('--gstock-grid-item-span').trim(),
        '--gstock-grid-item-start': styles.getPropertyValue('--gstock-grid-item-start').trim(),
      });
    });
  });
</script>

<style>
  gstock-card {
    height: 100%;
  }
</style>

Span (Columnas ocupadas)

Use el atributo span para controlar cuántas columnas ocupa el elemento. Los valores válidos son de 1 a 12.

<gstock-grid type="fluid">
  <gstock-grid-item span="12">Ocupa 12 columnas (ancho completo)</gstock-grid-item>
  <gstock-grid-item span="6">Ocupa 6 columnas (mitad)</gstock-grid-item>
  <gstock-grid-item span="6">Ocupa 6 columnas (mitad)</gstock-grid-item>
  <gstock-grid-item span="4">Ocupa 4 columnas (tercio)</gstock-grid-item>
  <gstock-grid-item span="4">Ocupa 4 columnas (tercio)</gstock-grid-item>
  <gstock-grid-item span="4">Ocupa 4 columnas (tercio)</gstock-grid-item>
</gstock-grid>

Offset (Desplazamiento)

Use el atributo offset para desplazar el elemento un número determinado de columnas desde el inicio.

Elemento centrado con offset

Este elemento ocupa 6 columnas y tiene un offset de 3 columnas, centrándolo en el grid de 12 columnas.

Configuración: span="6" offset="3"

Elemento offset 2 columnas

Este elemento tiene un desplazamiento de 2 columnas desde el inicio del grid.

Configuración: span="8" offset="2"

Offset de 4 columnas

Desplazamiento mayor para crear diseños asimétricos.

Configuración: span="4" offset="4"

<gstock-grid type="fluid">
  <gstock-grid-item span="6" offset="3">
    <gstock-card>
      <div slot="header">Elemento centrado con offset</div>
      <p>
        Este elemento ocupa 6 columnas y tiene un offset de 3 columnas, centrándolo en el grid de 12
        columnas.
      </p>
      <p>
        <strong>Configuración:</strong>
        span="6" offset="3"
      </p>
    </gstock-card>
  </gstock-grid-item>

  <gstock-grid-item span="8" offset="2">
    <gstock-card>
      <div slot="header">Elemento offset 2 columnas</div>
      <p>Este elemento tiene un desplazamiento de 2 columnas desde el inicio del grid.</p>
      <p>
        <strong>Configuración:</strong>
        span="8" offset="2"
      </p>
    </gstock-card>
  </gstock-grid-item>

  <gstock-grid-item span="4" offset="4">
    <gstock-card>
      <div slot="header">Offset de 4 columnas</div>
      <p>Desplazamiento mayor para crear diseños asimétricos.</p>
      <p>
        <strong>Configuración:</strong>
        span="4" offset="4"
      </p>
    </gstock-card>
  </gstock-grid-item>
</gstock-grid>

<script type="module">
  customElements.whenDefined('gstock-grid').then(() => {
    console.log('Grid with offset loaded');
  });
</script>

<style>
  gstock-card {
    height: 100%;
  }
</style>

Control Responsive con Variables CSS

Para control granular del comportamiento responsive, use variables CSS:

Elemento Responsive Principal

XL (≥1920px): 8 columnas

L (1440-1919px): 10 columnas

M (1024-1439px): 12 columnas (completo)

S (768-1023px): 8 columnas (completo)

XS (480-767px): 8 columnas (completo)

XXS (≤479px): 4 columnas (completo)

<gstock-grid type="fluid">
  <gstock-grid-item class="responsive-main">
    <gstock-card>
      <div slot="header">Elemento Responsive Principal</div>
      <p>
        <strong>XL (≥1920px):</strong>
        8 columnas
      </p>
      <p>
        <strong>L (1440-1919px):</strong>
        10 columnas
      </p>
      <p>
        <strong>M (1024-1439px):</strong>
        12 columnas (completo)
      </p>
      <p>
        <strong>S (768-1023px):</strong>
        8 columnas (completo)
      </p>
      <p>
        <strong>XS (480-767px):</strong>
        8 columnas (completo)
      </p>
      <p>
        <strong>XXS (≤479px):</strong>
        4 columnas (completo)
      </p>
    </gstock-card>
  </gstock-grid-item>

  <gstock-grid-item class="responsive-sidebar">
    <gstock-card>
      <div slot="header">Barra Lateral Responsive</div>
      <p>Se adapta automáticamente según el viewport.</p>
    </gstock-card>
  </gstock-grid-item>
</gstock-grid>

<script type="module">
  customElements.whenDefined('gstock-grid-item').then(() => {
    console.log('Responsive grid items loaded');
  });
</script>

<style>
  gstock-card {
    height: 100%;
  }

  .responsive-main {
    --gstock-grid-item-span-xl: 8;
    --gstock-grid-item-span-l: 10;
    --gstock-grid-item-span-m: 12;
    --gstock-grid-item-span-s: 8;
    --gstock-grid-item-span-xs: 8;
    --gstock-grid-item-span-xxs: 4;
  }

  .responsive-sidebar {
    --gstock-grid-item-span-xl: 4;
    --gstock-grid-item-span-l: 2;
    --gstock-grid-item-span-m: 12;
    --gstock-grid-item-span-s: 8;
    --gstock-grid-item-span-xs: 8;
    --gstock-grid-item-span-xxs: 4;
  }
</style>

Ejemplo de código

<gstock-grid type="fluid">
  <gstock-grid-item class="responsive-item">Contenido adaptable</gstock-grid-item>
</gstock-grid>

<style>
  .responsive-item {
    /* Desktop grande (XL): 8 columnas */
    --gstock-grid-item-span-xl: 8;

    /* Desktop (L): 10 columnas */
    --gstock-grid-item-span-l: 10;

    /* Tablet horizontal (M): 12 columnas */
    --gstock-grid-item-span-m: 12;

    /* Tablet vertical (S): 8 columnas */
    --gstock-grid-item-span-s: 8;

    /* Móvil grande (XS): 8 columnas */
    --gstock-grid-item-span-xs: 8;

    /* Móvil pequeño (XXS): 4 columnas */
    --gstock-grid-item-span-xxs: 4;
  }
</style>

Anidamiento

Los grid items pueden contener cualquier contenido, incluyendo otros componentes:

<gstock-grid type="fluid">
  <gstock-grid-item span="8">
    <gstock-card>
      <div slot="header">Contenido Principal</div>
      <p>Elemento que ocupa 8 columnas con una tarjeta.</p>
    </gstock-card>
  </gstock-grid-item>

  <gstock-grid-item span="4">
    <gstock-card>
      <div slot="header">Barra Lateral</div>
      <p>Elemento que ocupa 4 columnas.</p>
    </gstock-card>
  </gstock-grid-item>
</gstock-grid>

Variables CSS Disponibles

Span por Breakpoint

Controla cuántas columnas ocupa el elemento en cada breakpoint:

--gstock-grid-item-span - Span por defecto para todos los breakpoints
--gstock-grid-item-span-xxs - Span para XXS (≤479px)
--gstock-grid-item-span-xs - Span para XS (480–767px)
--gstock-grid-item-span-s - Span para S (768–1023px)
--gstock-grid-item-span-m - Span para M (1024–1439px)
--gstock-grid-item-span-l - Span para L (1440–1919px)
--gstock-grid-item-span-xl - Span para XL (≥1920px)

Posición Inicial por Breakpoint

Controla la columna de inicio del elemento en cada breakpoint:

--gstock-grid-item-start-xxs - Columna inicial para XXS
--gstock-grid-item-start-xs - Columna inicial para XS
--gstock-grid-item-start-s - Columna inicial para S
--gstock-grid-item-start-m - Columna inicial para M
--gstock-grid-item-start-l - Columna inicial para L
--gstock-grid-item-start-xl - Columna inicial para XL

Breakpoints por Defecto

Cuando no se especifican variables CSS personalizadas, el sistema usa estos valores por defecto según el número de columnas disponibles en cada breakpoint:

Breakpoint	Columnas	Span por defecto
XXS (≤479px)	4	4 (ancho completo)
XS (480–767px)	8	8 (ancho completo)
S (768–1023px)	8	8 (ancho completo)
M (1024–1439px)	12	12 (ancho completo)
L (1440–1919px)	12	12 (ancho completo)
XL (≥1920px)	12	12 (ancho completo)

Si especifica un atributo span, ese valor se usa como fallback para todos los breakpoints donde no haya una variable CSS específica definida.