Grid

컨텐츠를 2차원 형태로 배치할 수 있게끔 도와주는 컴포넌트입니다.

---

1

2

3

4

5

6

import React from "react";
import { Grid } from "@solo5star/layout-component";

const App = () => {
  return (
    <Grid rows={2} columns={3} gap={10} style={{ width: '300px', height: '200px' }}>
      <div style={{ background: 'red' }}>1</div>
      <div style={{ background: 'orange' }}>2</div>
      <div style={{ background: 'yellow' }}>3</div>
      <div style={{ background: 'green' }}>4</div>
      <div style={{ background: 'blue' }}>5</div>
      <div style={{ background: 'purple' }}>6</div>
    </Grid>
  );
};

export default App;

• rows 및 columns 속성을 설정하여 컨텐츠 배치 형태를 설정할 수 있습니다.
• gap 을 조절하여 컨텐츠 간 간격을 설정할 수 있습니다.