1# Custom Component Layout
2
3If you need to lay out child components in a custom component through calculation, you are advised to use the following APIs:
4
5- [onMeasureSize](../reference/apis-arkui/arkui-ts/ts-custom-component-layout.md#onmeasuresize10): invoked upon layout to measure the size of the component's child components. It is executed before **onPlaceChildren**.
6
7- [onPlaceChildren](../reference/apis-arkui/arkui-ts/ts-custom-component-layout.md#onplacechildren10): invoked upon layout to set the start position of the component's child components.
8
9**Example**
10
11```
12// xxx.ets
13@Entry
14@Component
15struct Index {
16  build() {
17    Column() {
18      CustomLayout({ builder: ColumnChildren })
19    }
20  }
21}
22
23// Pass multiple components in a builder as level-1 child components of the custom component (that is, container components for example, <Column>, are not included).
24@Builder
25function ColumnChildren() {
26  ForEach([1, 2, 3], (index: number) => { // LazyForEach is not supported.
27    Text('S' + index)
28      .fontSize(30)
29      .width(100)
30      .height(100)
31      .borderWidth(2)
32      .offset({ x: 10, y: 20 })
33  })
34}
35
36@Component
37struct CustomLayout {
38  @Builder
39  doNothingBuilder() {
40  };
41
42  @BuilderParam builder: () => void = this.doNothingBuilder;
43  @State startSize: number = 100;
44  result: SizeResult = {
45    width: 0,
46    height: 0
47  };
48
49  // Step 1: Calculate the size of each child component.
50  onMeasureSize(selfLayoutInfo: GeometryInfo, children: Array<Measurable>, constraint: ConstraintSizeOptions) {
51    let size = 100;
52    children.forEach((child) => {
53      let result: MeasureResult = child.measure({ minHeight: size, minWidth: size, maxWidth: size, maxHeight: size })
54      size += result.width / 2;
55    })
56    this.result.width = 100;
57    this.result.height = 400;
58    return this.result;
59  }
60  // Step 2: Place the child components.
61  onPlaceChildren(selfLayoutInfo: GeometryInfo, children: Array<Layoutable>, constraint: ConstraintSizeOptions) {
62    let startPos = 300;
63    children.forEach((child) => {
64      let pos = startPos - child.measureResult.height;
65      child.layout({ x: pos, y: pos })
66    })
67  }
68
69  build() {
70    this.builder()
71  }
72}
73```
74
75![custom-component-custom-layout](figures/custom-component-custom-layout.png)
76
77In the preceding example, the **Index** page contains a custom component that implements a custom layout and whose child components are passed in a builder on the **Index** page.
78
79**onMeasureSize** and **onPlaceChildren** are called in the custom component to set the size and position of its child components. In **onMeasureSize**, the initial size is set at 100, and the size of each child component is increased by half of the size of the previous child component, leading to component size increment. In **onPlaceChildren**, **startPos** is **300**, the position of each child component is **startPos** minus its own height, and the lower right corner of all child components is at the corner point (300,300). In this way, child components are stacked, starting from the lower right corner.
80