Grid

Système de grille flexible avec composants Row et Col. Supporte les modes 24 colonnes (par défaut) et 30 colonnes pour des mises en page précises.

Importation

import { Row, Col } from 'asterui'

Exemples

Grille de base

Système de grille de base à 24 colonnes.

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

Gouttière de grille

Personnaliser l'espacement entre les colonnes. Par défaut 16px ; valeurs recommandées : 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

Décalage de colonne

Décaler les colonnes en utilisant 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

Colonnes réactives

Différentes portées de colonnes à différents points de rupture.

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

Grille 30 colonnes

Contrôle précis avec 30 colonnes pour des mises en page exactes.

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`

Propriété	Description	Type	Défaut
`cols`	Nombre de colonnes de grille	`24 \| 30`	`24`
`gutter`	Espacement entre les colonnes (px)	`number \| [number, number]`	`16`
`justify`	Alignement horizontal des éléments de grille	`'start' \| 'end' \| 'center' \| 'between' \| 'around' \| 'evenly'`	-
`align`	Alignement vertical des éléments de grille	`'start' \| 'end' \| 'center' \| 'stretch' \| 'baseline'`	-
`children`	Composants de colonnes	`React.ReactNode`	-
`className`	Classes CSS supplémentaires	`string`	-

`Col`

Propriété	Description	Type	Défaut
`span`	Nombre de colonnes à occuper (sur 24 ou 30)	`number`	`24`
`offset`	Nombre de colonnes à décaler	`number`	`0`
`order`	Ordre visuel de la colonne (1-12)	`number`	-
`xs`	Portée réactive pour écrans extra petits (<640px)	`number`	-
`sm`	Portée réactive pour petits écrans (≥640px)	`number`	-
`md`	Portée réactive pour écrans moyens (≥768px)	`number`	-
`lg`	Portée réactive pour grands écrans (≥1024px)	`number`	-
`xl`	Portée réactive pour écrans extra larges (≥1280px)	`number`	-
`xxl`	Portée réactive pour écrans 2x extra larges (≥1536px)	`number`	-
`children`	Contenu de la colonne	`React.ReactNode`	-
`className`	Classes CSS supplémentaires	`string`	-

Notes d’utilisation

Par défaut, mise en page à 24 colonnes ; utiliser cols={30} pour un contrôle plus fin
Utiliser Row comme conteneur et Col pour les colonnes
Définir gutter sur Row pour ajouter de l’espacement entre les colonnes
Utiliser les props réactives (xs, sm, md, lg, xl, xxl) pour différentes portées de colonnes à différentes tailles d’écran
Les portées de colonnes doivent totaliser au maximum le nombre total de colonnes (24 ou 30) par ligne
Utiliser offset pour créer un espace vide avant une colonne
Le mode 30 colonnes est utile pour les mises en page nécessitant des ratios comme 1:3, 2:3 ou des pourcentages comme 20%, 33.33%