Layout & Gird

Layout & Gird 컴포넌트는 기본 레이아웃을 구성하는 컴포넌트 입니다.
containter : 1024px, gutter : 20px, column : 12(60px) 로 제작되었으며,
className으로 col-span-{1-12}로 column를 구성하실 수 있습니다.

className
col-span-1	col-span-2	col-span-3	col-span-4	col-span-5	col-span-6
col-span-7	col-span-8	col-span-9	col-span-10	col-span-11	col-span-12

Default

 
  <Layout>
    /** 구성할 내용들 */
  </Layout>

Using example

col-span-{1-12}로 구성하는 방법 예시 입니다.

 
  <Layout>
      <Title size="4xl" className="col-span-12 bg-purple-100">제목</Title>
      <Text size="xs" weight="semibold" className="col-span-12 bg-purple-200">
        안녕하세요
      </Text>
      <Logo
        width={500}
        height={300}
        className="pl-8 bg-purple-300 col-span-12"
      />
      <div className="col-span-3 bg-purple-400">Content2</div>
      <div className="col-span-3 bg-purple-400">Content2</div>
      <div className="col-span-3 bg-purple-400">Content2</div>
      <div className="col-span-3 bg-purple-400">Content2</div>
  </Layout>

Icon Logo