Chuyển tới nội dung chính
ZZalo Platforms

Grid

Cập nhật lần cuối:

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

stack_padding_issue

Properties​

Example​

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

export default function HomePage() {
  return (
    
      <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>
    
  );
}