Grid

Grid là một component giúp xếp các component theo lưới.

Ví dụ

import { Col, Container, Grid } from '@xotiny/preact';
import { FC } from 'preact/compat';

export const GridDemo: FC = () => {
  return (
    <div>
      <Container>
        <h3>Grid đều nhau ( column có thể set tăng dần không phụ thuộc 12 cột )</h3>
        <Grid column={{ xs: 1, sm: 2, xl: 3 }}>
          <div>
            <div className="comp" />
          </div>
          <div>
            <div className="comp" />
          </div>
          <div>
            <div className="comp" />
          </div>
          <div>
            <div className="comp" />
          </div>
          <div>
            <div className="comp" />
          </div>
          <div>
            <div className="comp" />
          </div>
        </Grid>

        <br />
        <br />

        <h3>Grid với các cột có thể khác nhau ( max là 12 column giống bootstrap )</h3>

        <Grid>
          <Col column={{ xs: 12, sm: 6, lg: 6 }}>
            <div className="comp" />
          </Col>
          <Col column={{ xs: 12, sm: 6, lg: 3 }}>
            <div className="comp" />
          </Col>
          <Col column={{ xs: 12, sm: 6, lg: 3 }}>
            <div className="comp" />
          </Col>
          <Col column={{ xs: 12, sm: 6, lg: 3 }}>
            <div className="comp" />
          </Col>
          <Col column={{ xs: 12, sm: 6, lg: 6 }}>
            <div className="comp" />
          </Col>
          <Col column={{ xs: 12, sm: 6, lg: 3 }}>
            <div className="comp" />
          </Col>
        </Grid>

        <br />
        <br />

        <h3>Grid đều nhau tự động responsive dựa trên width của các cột</h3>

        <Grid columnWidth={300}>
          <div>
            <div className="comp" />
          </div>
          <div>
            <div className="comp" />
          </div>
          <div>
            <div className="comp" />
          </div>
          <div>
            <div className="comp" />
          </div>
          <div>
            <div className="comp" />
          </div>
          <div>
            <div className="comp" />
          </div>
        </Grid>

        <br />
        <br />

        <h3>Đổi các vị trí sử dụng biến order</h3>

        <Grid>
          <Col column={{ xs: 12, sm: 6, lg: 7 }}>
            <div className="comp" />
          </Col>
          <Col column={{ xs: 12, sm: 6, lg: 5 }} order={{ lg: -1 }}>
            <div className="comp" style="background-color: #f78c71">
              --order-lg: -1
            </div>
          </Col>
          <Col column={{ xs: 12, sm: 6, lg: 4 }}>
            <div className="comp" />
          </Col>
          <Col column={{ xs: 12, sm: 6, lg: 4 }}>
            <div className="comp" />
          </Col>
          <Col column={{ xs: 12, sm: 6, lg: 4 }}>
            <div className="comp" />
          </Col>
        </Grid>

        <br />
        <br />

        <h3>Offset left các cột sử dụng biến start</h3>

        <Grid>
          <Col column={{ xs: 12, sm: 6, lg: 4 }} start={{ lg: 3 }}>
            <div className="comp" />
          </Col>
          <Col column={{ xs: 12, sm: 6, lg: 4 }}>
            <div className="comp" />
          </Col>
        </Grid>
      </Container>
    </div>
  );
};