Grid

Sistema de grade flexível com componentes Row e Col. Suporta modos de 24 colunas (padrão) e 30 colunas para layouts precisos.

Importação

import { Row, Col } from 'asterui'

Exemplos

Grade Básica

Sistema de grade básico de 24 colunas.

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 da Grade

Personalize o espaçamento entre colunas. O padrão é 16px; valores recomendados são 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

Offset de Coluna

Desloque colunas usando a 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

Colunas Responsivas

Diferentes extensões de coluna em diferentes breakpoints.

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

Grade de 30 Colunas

Controle refinado com 30 colunas para layouts 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`

Propriedade	Descrição	Tipo	Padrão
`cols`	Número de colunas da grade	`24 \| 30`	`24`
`gutter`	Espaçamento entre colunas (px)	`number \| [number, number]`	`16`
`justify`	Alinhamento horizontal dos itens da grade	`'start' \| 'end' \| 'center' \| 'between' \| 'around' \| 'evenly'`	-
`align`	Alinhamento vertical dos itens da grade	`'start' \| 'end' \| 'center' \| 'stretch' \| 'baseline'`	-
`children`	Componentes de coluna	`React.ReactNode`	-
`className`	Classes CSS adicionais	`string`	-

`Col`

Propriedade	Descrição	Tipo	Padrão
`span`	Número de colunas a ocupar (de 24 ou 30)	`number`	`24`
`offset`	Número de colunas a deslocar	`number`	`0`
`order`	Ordem visual da coluna (1-12)	`number`	-
`xs`	Extensão responsiva para telas extra pequenas (<640px)	`number`	-
`sm`	Extensão responsiva para telas pequenas (≥640px)	`number`	-
`md`	Extensão responsiva para telas médias (≥768px)	`number`	-
`lg`	Extensão responsiva para telas grandes (≥1024px)	`number`	-
`xl`	Extensão responsiva para telas extra grandes (≥1280px)	`number`	-
`xxl`	Extensão responsiva para telas 2x extra grandes (≥1536px)	`number`	-
`children`	Conteúdo da coluna	`React.ReactNode`	-
`className`	Classes CSS adicionais	`string`	-

Notas de Uso

O padrão é um layout de 24 colunas; use cols={30} para controle mais refinado
Use Row como container e Col para colunas
Defina gutter em Row para adicionar espaçamento entre colunas
Use props responsivas (xs, sm, md, lg, xl, xxl) para diferentes extensões de coluna em diferentes tamanhos de tela
As extensões de coluna devem somar até o total de colunas (24 ou 30) ou menos por linha
Use offset para criar espaço vazio antes de uma coluna
Modo de 30 colunas é útil para layouts que precisam de proporções como 1:3, 2:3, ou porcentagens como 20%, 33.33%