Grid

Cập nhật lần cuối: 27/05/2022

Grid là component dùng để tạo ra bố cục lưới

Properties

Name	Type	Default	Description
children	React.ReactNode		ReactNode
columnCount	number	1	Specifying the columns in a grid
columnSpace	string	var(--s1)	The space between grid column
rowSpace	string	var(--s1)	The space between grid row

Example

Open Sandbox

import React from "react";
import { Page, Grid, Button, Center } from "zmp-ui";

export default function HomePage() {
  return (
    <Page className='section-container'>
      <Center gutters='1rem'>
        <Grid space='1rem' columnCount={3}>
          <div
            style={{
              border: "solid 2px",
              width: "20px",
              height: "20px"
            }}
          />
          <div
            style={{
              border: "solid 2px",
              width: "30px",
              height: "20px"
            }}
          />
          <div
            style={{
              border: "solid 2px",
              width: "40px",
              height: "20px"
            }}
          />
          <div
            style={{
              border: "solid 2px",
              width: "50px",
              height: "20px"
            }}
          />
          <div
            style={{
              border: "solid 2px",
              width: "60px",
              height: "20px"
            }}
          />
        </Grid>
      </Center>
    </Page>
  );
}