컨테이너와 그리드로 레이아웃 만들기

블록을 컨테이너로 묶거나 그리드의 셀에 배치해, 카드와 열 같은 레이아웃을 만들고 하나의 덩어리로 꾸미고 옮겨 보세요.

컨테이너와 그리드는 다른 블록을 담는 블록입니다. 컨테이너는 블록을 하나의 상자로 묶어 주며, 배경을 지정하거나 하나의 덩어리로 옮길 수 있습니다. 그리드는 블록을 행과 열로 이루어진 표 형태로 배치합니다. 둘 다 블록 패널의 레이아웃 그룹에 있습니다.

어떤 것을 써야 할까요

둘 다 안에 있는 블록에 각자의 공간을 줍니다. 블록을 페이지 전체에 펼쳐 놓기만 하면 된다면 둘 다 필요하지 않습니다. 섹션에 바로 배치하세요.

이미 페이지에 있는 블록을 컨테이너 안으로 끌어넣거나 밖으로 다시 끌어낼 수도 있습니다. 컨테이너 안에 다른 컨테이너를 넣을 수도 있습니다. 컨테이너 안에서도 페이지에서와 똑같이 블록을 옮기고 크기를 조정합니다. 블록 추가, 이동, 크기 조정하기를 참고하세요.

중요: 컨테이너를 삭제하면 안에 있는 모든 블록도 함께 삭제됩니다. 실수로 삭제했다면 상단 바에서 실행 취소를 클릭하세요.

일반에서 설정할 수 있는 항목은 다음과 같습니다.

내부 레이아웃은 블록을 배열하는 방식을 정합니다. 자유 그리드 (12열)는 섹션처럼 블록을 어디에나 놓을 수 있습니다. 세로 쌓기는 블록을 위아래로 차례로 놓습니다. 가로 나열은 블록을 한 줄에 놓고, 공간이 부족하면 다음 줄로 넘깁니다.
그리드 간격은 블록 사이의 공간입니다.
항목 정렬은 컨테이너가 블록보다 높을 때 블록이 놓이는 위치를 정합니다. 늘이기, 위쪽, 가운데, 아래쪽 중에서 고릅니다.

모양에는 배경색, 테두리 색상, 모서리 둥글기, 좌우 여백과 상하 여백(가장자리와 블록 사이의 공간), 최소 높이가 있습니다.

참고: 새 블록은 내부 레이아웃이 자유 그리드 (12열)인 컨테이너에만 놓을 수 있습니다. 세로 쌓기나 가로 나열 컨테이너를 채우려면 먼저 자유 그리드 (12열)로 바꾸고 블록을 놓은 다음 원래대로 되돌리세요.

레이아웃 그룹에서 그리드를 섹션으로 끌어옵니다. 새 그리드는 3열 2행이며 점선 셀로 표시됩니다.
그리드를 선택한 상태에서 설정 패널의 일반을 엽니다. 열 개수와 행 개수로 모양을 정합니다. 각각 1에서 8까지 지정할 수 있습니다.
원하는 셀 위로 블록을 끌어옵니다. 파란색 상자가 블록이 들어갈 셀을 보여 줍니다.
마우스 버튼을 놓습니다.
블록이 여러 셀에 걸쳐 늘어났다면 셀 한 칸 너비로 줄입니다. 블록을 선택하고 크기와 위치를 열어 가로 칸 수를 1로 설정하거나, 오른쪽 가장자리 핸들을 셀 경계까지 끌어 되돌립니다.

새 블록은 그리드의 열 수를 한도로 평소 너비를 유지하므로, 처음에는 한 행을 통째로 채우는 경우가 많습니다. 표의 병합된 셀처럼, 블록이 일부러 여러 셀에 걸치게 할 수도 있습니다. 블록의 너비나 높이를 늘려 그리드의 더 넓은 영역을 덮으면 됩니다.

그리드 간격과 항목 정렬은 컨테이너와 똑같이 작동합니다.
모양에서는 그리드 전체의 배경색, 테두리 색상, 모서리 둥글기, 여백을 지정할 수 있습니다. 셀 테두리는 에디터에 보이는 점선 셀 가이드의 색상만 바꿉니다.

휴대폰에서는 그리드가 한 열로 합쳐지고 블록이 순서대로 쌓입니다. 그래서 3열짜리 행은 블록 세 개가 위아래로 놓입니다.