#### Column Layout

```tsx
const fields = ["text1", "text2", "text3", "text4", "text5", "text6", "text7"];

const layout = [
    "text1",
    "text2",
    {
      name: "group1", 
      direction: RealGrid.ColumnLayoutDirection.VERTICAL, 
      items:["text3","text4"]
    },{
      name: "group2", 
      direction: RealGrid.ColumnLayoutDirection.HORIZONTAL, 
      items:["text5","text6"]
    },
    "text7"
]

...
<RealGridReact 
  ref={gridRef}
  autoGenerateField={true}
  layout={layout}
  rows={[
    {text1:"텍스트1", text2:"텍스트2", text3:"텍스트3", text4:"텍스트4", text5: "텍스트5", text6:"텍스트6", text7:"텍스트7"},
    {text1:"텍스트1", text2:"텍스트2", text3:"텍스트3", text4:"텍스트4", text5: "텍스트5", text6:"텍스트6", text7:"텍스트7"},
  ]}
>
    {fields.map((field) => (
        <RGDataColumn key={field} name={field} fieldName={field} header={{text: field}} width={200}/>
    ))}
</RealGridReact>
```

See the Column Groups [Demo](/guides/column/layout).