Lite UI | Grid

import { Grid } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <Grid repeatCount="auto-fill" tracks="100px" gap={16}>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
    </Grid>
  );
};

export default App;

RepeatCount

import { Grid } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <Grid repeatCount={3} gap={8}>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
    </Grid>
  );
};

export default App;

Tracks

import { Grid } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <Grid repeatCount={3} tracks="minmax(0px, 150px)" gap={8}>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
      <div className="h-10 bg-neutral-400"></div>
    </Grid>
  );
};

export default App;

API

Grid props

Property	Type	Description	Default
repeatCount	number \| string	Repeat count in grid-template-columns property.	1
tracks	string	Repeat count in grid-template-columns property.	"1fr"
gap	number \| string	Spacing between elements.	-

Default props

Property	Type	Description	Default
key	string	Unique key that identifies repeated elements.	-
className	string	Attribute used to add classes to HTML elements.	-
style	CSSProperties	Attribute used to apply CSS styles directly to HTML elements.	-

Made by ma9pie

Deployed on