Grid

Sistema de cuadrícula flexible con componentes Row y Col. Soporta modos de 24 columnas (predeterminado) y 30 columnas para diseños precisos.

Importar

import { Row, Col } from 'asterui'

Ejemplos

Cuadrícula Básica

Sistema de cuadrícula básico de 24 columnas.

col-6

import { Row, Col } from 'asterui'

function App() {
  return (
      <Row>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
      </Row>
    )
}

export default App

Gutter de Cuadrícula

Personaliza el espaciado entre columnas. El predeterminado es 16px; los valores recomendados son 16, 24, 32, 40, 48.

col-6

import { Row, Col } from 'asterui'

function App() {
  return (
      <Row gutter={32}>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
      </Row>
    )
}

export default App

Desplazamiento de Columna

Desplaza columnas usando la prop offset.

col-8

col-8 offset-8

col-6 offset-6

import { Row, Col, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md" className="w-full">
        <Row>
          <Col span={8}>
            <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
              col-8
            </div>
          </Col>
          <Col span={8} offset={8}>
            <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
              col-8 offset-8
            </div>
          </Col>
        </Row>
        <Row>
          <Col span={6} offset={6}>
            <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
              col-6 offset-6
            </div>
          </Col>
          <Col span={6} offset={6}>
            <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
              col-6 offset-6
            </div>
          </Col>
        </Row>
      </Space>
    )
}

export default App

Columnas Responsivas

Diferentes expansiones de columna en diferentes puntos de interrupción.

Responsive

import { Row, Col } from 'asterui'

function App() {
  return (
      <Row gutter={24}>
        <Col xs={24} sm={12} md={8} lg={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            Responsive
          </div>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            Responsive
          </div>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            Responsive
          </div>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            Responsive
          </div>
        </Col>
      </Row>
    )
}

export default App

Cuadrícula de 30 Columnas

Control de grano fino con 30 columnas para diseños precisos.

6/30

12/30

import { Row, Col } from 'asterui'

function App() {
  return (
      <Row cols={30} gutter={8}>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            6/30
          </div>
        </Col>
        <Col span={12}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            12/30
          </div>
        </Col>
        <Col span={12}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            12/30
          </div>
        </Col>
      </Row>
    )
}

export default App

API

`Row`

Propiedad	Descripción	Tipo	Predeterminado
`cols`	Número de columnas de cuadrícula	`24 \| 30`	`24`
`gutter`	Espaciado entre columnas (px)	`number \| [number, number]`	`16`
`justify`	Alineación horizontal de elementos de cuadrícula	`'start' \| 'end' \| 'center' \| 'between' \| 'around' \| 'evenly'`	-
`align`	Alineación vertical de elementos de cuadrícula	`'start' \| 'end' \| 'center' \| 'stretch' \| 'baseline'`	-
`children`	Componentes de columna	`React.ReactNode`	-
`className`	Clases CSS adicionales	`string`	-

`Col`

Propiedad	Descripción	Tipo	Predeterminado
`span`	Número de columnas que abarca (de 24 o 30)	`number`	`24`
`offset`	Número de columnas de desplazamiento	`number`	`0`
`order`	Orden visual de la columna (1-12)	`number`	-
`xs`	Expansión responsiva para pantallas extra pequeñas (<640px)	`number`	-
`sm`	Expansión responsiva para pantallas pequeñas (≥640px)	`number`	-
`md`	Expansión responsiva para pantallas medianas (≥768px)	`number`	-
`lg`	Expansión responsiva para pantallas grandes (≥1024px)	`number`	-
`xl`	Expansión responsiva para pantallas extra grandes (≥1280px)	`number`	-
`xxl`	Expansión responsiva para pantallas 2x extra grandes (≥1536px)	`number`	-
`children`	Contenido de la columna	`React.ReactNode`	-
`className`	Clases CSS adicionales	`string`	-

Notas de Uso

El predeterminado es un diseño de 24 columnas; usa cols={30} para mayor control
Usa Row como contenedor y Col para columnas
Establece gutter en Row para añadir espaciado entre columnas
Usa props responsivas (xs, sm, md, lg, xl, xxl) para diferentes expansiones de columna en diferentes tamaños de pantalla
Las expansiones de columna deben sumar el total de columnas (24 o 30) o menos por fila
Usa offset para crear espacio vacío antes de una columna
El modo de 30 columnas es útil para diseños que necesitan proporciones como 1:3, 2:3 o porcentajes como 20%, 33.33%