Skip to main content

Grid Layout

Grid

Applicable Scenarios​

Grid Layout (Grid) is the most powerful page layout solution. It can specify the positions of multiple components inside the container.

It divides the page into individual grids, allowing free combination of different grids to create various layouts.

img

Previously, effects that could only be achieved through multiple layers of nested containers can now be implemented directly, enabling two-dimensional layouts.

Basic Features

Add Rows and Columns​

The grid layout is divided into "rows" and "columns". You can quickly add rows and columns on the right, then drag components into the columns.

Batch Copy Row and Column Styles​

When you have selected a column and click to add rows and columns, the newly added components will by default copy the styles of the selected rows and columns, as shown in the figure below:

Grid-Batch Set Styles

This feature significantly improves batch setting efficiency. With just one configuration, it can be applied in batches to multiple rows and columns. For example, in Chinese-style forms, you only need to set the border for the first row, then select the current column and click to add rows or columns to batch copy styles, improving configuration efficiency.

Grid - Chinese-style Form Replication

Set Spacing​

The grid layout component supports batch setting of row spacing and column spacing, with several built-in default levels.

If the default margins are insufficient, you can also select a row or column, switch to the style configuration, and set the padding and margins for the rows and columns.

Set Column Width (Multi-end Adaptation)​

Each row of the grid layout component has been set to Flex layout.

Three Methods for Adjusting Multi-end Column Width​

The top section of setting column width shows the currently active end, allowing different column width settings for mobile and PC ends.

  • Auto Fill

This means that the column evenly distributes the remaining width. Since the row uses flex layout, setting "Auto Fill" configures "flex: 1".

  • Fit Content

This means that the column width follows the content width. For example, when the content width is 100px, the column width will be 100px.

  • Manual Adjustment

Supports manually setting column width. In the grid layout, each row is divided into 12 columns. When you set a column to span 2 columns, its width becomes 2/12 of the row width. Exceeding 12 columns will wrap automatically.

Example: Column Settings for Form Scenarios on Different Ends​

Taking the form scenario as an example: on the PC end, it uses a two-column layout, while on the mobile end, due to the smaller screen, only one column is displayed. This can be accomplished in just two steps:

Step 1: Set Two Columns for PC End

Step 2: Set Mobile End Display with Automatic Wrapping

Setting Horizontal and Vertical Alignment​

The grid layout component itself is a regular container div. The row has flex layout enabled by default, making it a flex container, while columns are container items (flex item). Therefore, horizontal and vertical alignment of columns can be configured at the row level.

1. Setting Vertical Alignment for Rows (align-items)​

When in a row, the heights of multiple columns are inconsistent, vertical alignment can be set.

Column height expands to fit content by default, but can also be set in the style panel.

3. Setting Column Alignment​

The column is a regular container component. Its alignment can be set in the style panel, as described in the general style settings below.

General Style Settings​

Grid layout containers, rows, and columns are ordinary components with layout capabilities. Their layout, borders, shadows, etc. can be configured in the style panel.

Usage Example​

Example 1: Implement a Multi-column Form in One Row in 3 Minutes​

Example 2: Quickly Implement a Visitor Appointment Homepage Using Grid Layout in 6 Minutes​

First, decompose the page using a grid layout. The page can be divided into upper and lower sections. Due to different row spacing between these sections, we implement them with two grid layouts: the upper section with 1 row and 2 columns, and the lower section with 3 rows and 3 columns. By configuring padding and margin in the style panel, the implementation is demonstrated in the video below:

Detailed video below:

Example 2: Recreating a Table Using Grid Layout​

As shown in the figure below, you can implement custom grids when needed.

The operation process is as follows:

Implementation Details​

Overall, it references bootstrap's grid system based on flexbox implementation

The Row component is a display: flex container. Horizontal alignment and vertical alignment of columns within the container are configured through justifyContent and alignItems respectively.

Col is a flex item and can only be placed inside a Row. There are three types corresponding to different column widths.

  • Auto-fill: In this case, flex-grow is set to 1 for all, so the Col will automatically fill the width and equally share the remaining space with other auto-filled Cols.
  • Fit Content: In this case, both flex-grow and flex-shrink are set to 0, and flex-basis and width are set to auto, so the width of the Col will automatically adjust to fit its content.
  • Manual Adjustment: In this case, a fixed percentage width is set based on the 12-column layout.

By using media query to distinguish screen widths, multi-end configuration is achieved.

Grid is a container that controls the gaps between rows and columns by setting CSS custom properties.

/* Column spacing is achieved using col padding-(left / right) */
--wd-grid-gutter-x: 2rem;

/*
The line break spacing between columns when a line break occurs within a row
Consistent with bootstrap, it is achieved using the margin-top property of Col, while setting a negative margin on the Row to eliminate extra spacing within the row.
*/
--wd-grid-gutter-y: 0px;

/*
the spacing between rows,
It is achieved by setting the margin-bottom for Rows that are not the last-child.
*/
--wd-grid-gutter-rb: 0px;

Style API​

Grid​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-grid网格布局组件根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-grid {
  /* 在这里编写CSS 样式 */
}
PC端根元素.wd-pc-grid网格布局组件PC端根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-grid {
  /* 在这里编写CSS 样式 */
}
H5端根元素.wd-h5-grid网格布局组件H5端根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-grid {
  /* 在这里编写CSS 样式 */
}
小程序端根元素.wd-mp-grid网格布局组件小程序端根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-grid {
  /* 在这里编写CSS 样式 */
}

了解样式 API

Row​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-grid-row行组件根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-grid-row {
  /* 在这里编写CSS 样式 */
}
PC端根元素.wd-pc-grid-row行组件PC端根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-grid-row {
  /* 在这里编写CSS 样式 */
}
H5端根元素.wd-h5-grid-row行组件H5端根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-grid-row {
  /* 在这里编写CSS 样式 */
}
小程序端根元素.wd-mp-grid-row行组件小程序端根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-grid-row {
  /* 在这里编写CSS 样式 */
}

了解样式 API

Column​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-grid-col列组件根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-grid-col {
  /* 在这里编写CSS 样式 */
}
PC端根元素.wd-pc-grid-col列组件PC端根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-grid-col {
  /* 在这里编写CSS 样式 */
}
H5端根元素.wd-h5-grid-col列组件H5端根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-grid-col {
  /* 在这里编写CSS 样式 */
}
小程序端根元素.wd-mp-grid-col列组件小程序端根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-grid-col {
  /* 在这里编写CSS 样式 */
}

了解样式 API

Property API​

Grid​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名
属性标识
类型
说明
列间距gutterXstring
行间距gutterYstring

Row​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名
属性标识
类型
说明
列数量colCountnumber
列间距gutterXstring

对当前行的所有列生效。配置后，将会覆盖父层网格布局的属性。

垂直对齐alignItemsstring

Column​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名
属性标识
类型
说明
移动端列宽widthTypestring
PC端列宽lgWidthTypestring

Frequently Asked Questions​

What is the difference between General Container / Grid Layout / Scrolling Container?​

General Container / Grid Layout / Scrolling Container are three commonly used container types in WeDa, and their differences are as follows:

  • General Container: The most basic container type used to hold text, images, and other content within a page. It can nest other components and achieve different layout effects through style settings. By default, it lacks scrolling functionality. Content will automatically expand vertically if no height is specified. Similar to View in mini-programs and div in Web development.
  • Grid Layout: A container designed for layout purposes that extends flexible layout capabilities beyond basic containers like the general container. It divides the page into individual grids, allowing arbitrary combinations of different grids to create various layouts such as left-right arrangements and multi-column rows. It also supports displaying different layout patterns across multiple devices.
  • Scrolling Container: A container with scroll bars. After setting its width and height, if the content exceeds the container's boundaries, the content can be scrolled within the container. Similar to ScrollView in mini-programs.

In actual development, it is recommended to use Grid Layout for detailed arrangements of entire pages and internal modules. For multi-device requirements, display effects can be configured across different platforms. When scrolling beyond content areas is needed, Scrolling Containers can be utilized.

How to implement local scrolling?​

Scrolling Containers can be used to display content that requires scrolling when it exceeds the visible area.

When the total width/height of component content within a scrolling container exceeds the container's own width/height, scroll bars will appear, allowing users to view all content by sliding the scroll bars.

Note that you must set the width and height for the scrolling container, ensuring the content dimensions exceed those of the container itself, to enable the scrolling effect.

If only horizontal scrolling is required, ensure the scrolling container's width is less than the width of the content it contains.

If only vertical scrolling is required, ensure the scrolling container's height is less than the width of the content it contains.