# 多列容器

来源快照：`result_data_new_260518.json`

- 来源 ID：`1183665864135090182`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 基础组件 - 基础组件/容器类
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

## 一、功能背景

随着用户场景的搭建，多列容器组件旨在帮助用户可以快速搭建出目标场景。

## 二、功能概述

多列容器可以实现一行多列布局，可以拖入多个组件到多列容器组件的列之中，在每个列里面的组件布局为流式布局，形成一个复合的大组件。

## 三、场景介绍

在页面设计器上使用多列容器组件，可以达到网格布局一行多列流式布局混排的效果。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340820631846922&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 四、功能说明

### 1、组件配置属性

1.1 支持设置列数，默认一行两列

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340820618330140&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

1.2 支持设置每列宽度

列宽调整有“占比”和“固定宽度”两种方式

固定宽度：一个具体的数值，单位为px。

占比：1-100的正整数，计算规则为 当前单元格的占比值/所有设置为占比的单元格的数值总和。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340824689836038&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

1.3 支持设置排列方式，有纵向和横向两种

PC端默认横向，移动端默认纵向

纵向排列时，支持设置行间距

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340824689836044&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

** **

###  2、前台运行效果

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340824742264862&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 五、上下游关联功能点

组件样式

组件事件动作

组件权限
