Componente Grid - @albanese-ui/grid

Il componente Grid è un layout flessibile che consente di organizzare gli elementi in una griglia responsiva. Può essere configurato per avere un numero definito di colonne e un gap tra gli elementi, rendendolo ideale per costruire layout complessi e ben strutturati.

Installazione

Per utilizzare il componente nella tua applicazione, assicurati di aver installato la libreria:

1npm install @albanese-ui/grid

Importazione

Puoi importare il componente direttamente dal pacchetto:

1import { Navbar } from '@albanese-ui/grid';

Come utilizzare il componente

Esempio base:

1import { Grid } from '@albanese-ui/grid';
2
3function App() {
4  return (
5    <div>
6      <Grid columns={3} gap={20}>
7        <div>Elemento 1</div>
8        <div>Elemento 2</div>
9        <div>Elemento 3</div>
10        <div>Elemento 4</div>
11        <div>Elemento 5</div>
12      </Grid>
13    </div>
14  );
15}
16
17export default App;

Proprietà del componente

Prop	Tipo	Default	Descrizione
columns	number	3	Il numero di colonne da visualizzare nella griglia.
gap	number	20	La distanza (in pixel) tra gli elementi della griglia.
children	React.ReactNode	null	Gli elementi da inserire all'interno della griglia. Ogni elemento deve essere un elemento JSX o un componente.

Personalizzazione

Gli stili possono essere personalizzati modificando il file CSS Module associato al componente (grid.module.css). Puoi anche modificare direttamente le proprietà come columns e gap per adattare la griglia alle tue necessità.