CSS Grid 레이아웃을 이용해서 각 컴포넌트를 배치할 수 있습니다.

`column`과 `row` 속성으로 컴포넌트 배치하기

화면을 가상의 영역으로 나눠 각 셀에 컴포넌트를 배치합니다. 전체 셀의 크기는 모든 컴포넌트의 column과 row 속성의 최대 값으로 결정합니다. 예를 들어 열이 3, 행이 4인 레이아웃이 있습니다.

column 속성은 왼쪽부터 1에서 시작합니다. row 속성은 위부터 1에서 시작합니다. 모든 셀의 너비는 같습니다.

색칠한 셀에 컴포넌트를 배치하려면 column과 row 값을 다음과 같이 설정합니다.

<r-doc id="3e005ee60edcc72d" column="1" row="1" />

컴포넌트가 하나만 있기 때문에 전체 셀 갯수는 한개입니다. 따라서 전체 공간을 차지합니다.

색칠한 셀에 컴포넌트를 배치하려면 column과 row 값을 다음과 같이 설정합니다.

<r-doc id="3e005ee60edcc72d" column="3" row="4" />

특정 행에 컴포넌트를 배치하지 않으면 해당 행의 높이가 0이기 때문에 화면에서 공간을 차지하지는 않습니다.

여러 열에 하나의 컴포넌트를 배치할 수 있습니다. 색칠한 셀에 컴포넌트를 배치하려면 column과 row 값을 다음과 같이 설정합니다.

<r-doc id="3e005ee60edcc72d" column="1-3" row="3" />

column 속성에 -를 구분자로 시작 열과 끝열을 설정합니다.

여러 행에 하나의 컴포넌트를 배치할 수 있습니다. 색칠한 셀에 컴포넌트를 배치하려면 column과 row 값을 다음과 같이 설정합니다.

<r-doc id="3e005ee60edcc72d" column="1" row="2-3" />

row 속성에 -를 구분자로 시작 행과 끝행을 설정합니다.

여러 열과 여러 행에 하나의 컴포넌트를 배치할 수 있습니다. 색칠한 셀에 컴포넌트를 배치하려면 column과 row 값을 다음과 같이 설정합니다.

<r-doc id="3e005ee60edcc72d" column="1-2" row="3-4" />

column 속성에 -를 구분자로 시작 열과 끝열을 설정합니다.

row 속성에 -를 구분자로 시작 행과 끝행을 설정합니다.

셀 사이의 간격 설정

기본 여백은 3입니다. 단위는 rem으로 1rem은 16px입니다. r-option 컴포넌트로 설정할 수 있습니다.

<r-option name="gap" value="5" />

여러 번 선언했을 때는 마지막에 선언한 옵션을 사용합니다.

컴포넌트 안에서는 셀 기반 레이아웃을 지원하지 않습니다. 예를 들어 r-panel과 r-tab 컴포넌트 아래에 있는 컴포넌트의 column과 row 속성은 무시합니다.
모든 칼럼의 너비는 같습니다. 페이지 너비를 열의 숫자로 나눈 값이 칼럼 너비의 값입니다.
행의 높이는 그 행에 있는 컴포넌트의 높이가 결정합니다. 따라서 각 행의 높이는 다릅니다.
셀 기반 레이아웃을 사용하려면 일반 HTML 코드를 r-html 컴포넌트로 작성합니다.