Grille

Système de grille à 24 colonnes. LhRow gère l'arrangement et l'espacement, LhCol la portée (span), le décalage et les points de rupture responsifs.

Grille

<template>
  <div>
    <p class="demo-note">Grille de base (24 colonnes) + gouttière (gutter)</p>
    <LhRow :gutter="16">
      <LhCol :span="8"><div class="grid-cell">span=8</div></LhCol>
      <LhCol :span="8"><div class="grid-cell">span=8</div></LhCol>
      <LhCol :span="8"><div class="grid-cell">span=8</div></LhCol>
    </LhRow>
    <p class="demo-note">offset / push / pull</p>
    <LhRow :gutter="12">
      <LhCol :span="6" :offset="6"><div class="grid-cell">offset=6</div></LhCol>
      <LhCol :span="6" :push="6"><div class="grid-cell">push=6</div></LhCol>
    </LhRow>
    <p class="demo-note">Alignement : justify / align</p>
    <LhRow
      justify="center"
      align="middle"
      style="height: 60px; background: var(--lh-bg-color-page, #f6f1ea); border-radius: 6px"
    >
      <LhCol :span="6"><div class="grid-cell">Centré</div></LhCol>
    </LhRow>
    <p class="demo-note">Points de rupture responsifs : :sizes=&#123; xs: 24, sm: 12, md: 8 &#125;</p>
    <LhRow :gutter="12">
      <LhCol v-for="i in 6" :key="i" :sizes="{ xs: 24, sm: 12, md: 8 }">
        <div class="grid-cell">Colonne réactive {{ i }}</div>
      </LhCol>
    </LhRow>
  </div>
</template>

Astuce

La classe .grid-cell du demo n'est qu'un style d'exemple (fond gris, coins arrondis), la bibliothèque elle-même ne la fournit pas.

Row Props

Propriété	Description	Type	Valeur par défaut
justify	Arrangement sur l'axe principal	'start' \| 'end' \| 'center' \| 'space-between' \| 'space-around'	'start'
align	Alignement sur l'axe croisé	'top' \| 'middle' \| 'bottom'	'top'
gutter	Espacement entre colonnes (px ou [horizontal, vertical])	number \| [number, number]	0
wrap	Autorise le passage à la ligne	boolean	true
sx	Raccourci de mise en page sx	—	—

Col Props

Propriété	Description	Type	Valeur par défaut
span	Nombre de colonnes occupées (système à 24 colonnes)	number	—
offset	Nombre de colonnes de décalage à gauche	number	0
push	Décalage vers la droite (en colonnes)	number	0
pull	Décalage vers la gauche (en colonnes)	number	0
xs / sm / md / lg / xl	Portée par point de rupture : <640 / ≥640 / ≥768 / ≥1024 / ≥1280px	number	—
sizes	Déclaration multiple par point de rupture (équivalent à xs~xl)	{ xs?, sm?, md?, lg?, xl? }	—
sx	Raccourci de mise en page sx	—	—