레이아웃 그리드 블록을 사용하여 웹사이트의 콘텐츠를 정렬하세요. 이 블록을 사용하면 반응형 중단점을 정의할 수 있습니다. 즉, 데스크톱 및 모바일 보기 모두에 대해 글이나 페이지에 나란히 표시되는 열 수를 선택할 수 있습니다.
레이아웃 그리드는 웹 페이지의 콘텐츠에 대한 구조와 정렬을 제공합니다. 여기에는 뷰잉 기기에 따라 결정되는 세로줄이 여러 개 포함됩니다(반응형 중단점).
- 데스크톱 기기용 그리드 줄 12개
- 태블릿 기기용 그리드 줄 8개
- 모바일 장치용 그리드 줄 4개
레이아웃 그리드 블록에서 그리드 줄은 함께 그룹화되어 열(1-4)을 형성하고 각 열 내에 콘텐츠를 배치할 수 있습니다.
데스크톱 레이아웃의 열이 더 작은 기기에서는 여러 행으로 분산되는 것이 일반적입니다. 태블릿 또는 모바일 보기로 전환하면 자동으로 설정되지만 그리드 값을 직접 변경하여 재정의할 수 있습니다.
반응형 중단점은 고급 기능을 다룹니다. 이 기능을 신경 쓰지 않아도 레이아웃 그리드 블록을 문제없이 사용할 수 있으며 그리드에서는 기본 중단점이 사용됩니다.
레이아웃 그리드 블록을 추가하려면 + 블록 삽입기 아이콘을 클릭하고 “레이아웃 그리드”를 검색하세요. 이것을 클릭하면 글 또는 페이지에 블록이 추가됩니다.
💡
키보드를 사용하여
/layout을 새 줄에 입력하고 Enter 키를 눌러 빠르게 새 레이아웃 그리드 블록을 추가할 수도 있습니다.
플러그인이 활성화된 사이트를 이용하는 경우 플러그인 → 설치된 플러그인에서 레이아웃 그리드 플러그인을 활성화해야 합니다.
블록 추가에 대한 자세한 안내는 여기에서 확인하세요.
레이아웃 그리드 블록을 처음 추가하면 열 수를 선택하라는 메시지가 표시됩니다.
이 내용은 나중에 블록 설정에서 변경할 수 있습니다.
그리드의 각 열에는 다른 블록이 포함될 수 있습니다. 각 열의 + 블록 삽입기 아이콘을 클릭한 다음, 추가하려는 블록을 검색합니다.
블록을 클릭하면 다음과 같은 옵션의 도구 모음이 표시됩니다.
레이아웃 그리드 블록의 도구 모음에는 다음과 같은 옵션이 있습니다.
- 블록 유형 또는 스타일 변경.
- 블록 끌기
- 블록을 위 또는 아래로 이동
- 블록의 가로 정렬 또는 너비 변경
- 데스크톱, 태블릿 및 모바일용 반응형 중단점.
- 블록의 세로 정렬 변경
- 추가 옵션
블록을 클릭하면 오른쪽 사이드바에 블록 설정이 추가로 표시됩니다. 사이드바가 표시되지 않으면 오른쪽 위 모서리의 ⚙️(기어) 아이콘을 클릭하여 설정을 가져와야 할 수도 있습니다.
레이아웃 그리드 블록에 포함된 열 수를 변경하려면 이 기능을 사용하세요. 열 수를 하나 줄이면 마지막 열(및 모든 내용)이 제거됩니다.
데스크톱, 태블릿 및 모바일의 버튼을 클릭하여 해당 보기를 사용자 정의하세요.
이전 열에서 또는 레이아웃 그리드의 시작 부분에서 간격을 추가하기 위해 열이 건너뛰는 그리드 줄의 수를 결정합니다.
단일 열의 전체 너비를 구성하는 그리드 줄의 총 수입니다.
그리드 거터는 그리드 내에서 두 열 사이의 공간입니다.
거터 없음을 선택하면 첫 번째 거터와 마지막 거터를 포함하여 모든 거터가 제거됩니다.
거터 크기에 거터 없음 이외의 값이 있으면 거터 끝단 추가 버튼을 해제할 수 있습니다. 그러면 그리드의 맨 왼쪽과 오른쪽에 있는 거터가 제거되어 페이지의 전체 너비를 채우게 됩니다.
고급
고급 탭에서는 블록에 CSS 클래스를 추가하여 블록 스타일을 정하는 사용자 정의 CSS를 작성할 수 있습니다.
레이아웃 그리드 블록 내의 각 열에는 자체 설정이 있어서 배경 색상과 안쪽 여백을 변경할 수 있습니다. 이 설정은 선택한 개별 열에만 영향을 미칩니다.
일반적으로 레이아웃 그리드 내에서 열의 크기를 조정할 수 있습니다. 단, 행 내의 각 열에 대한 모든 오프셋 및 스팬 값의 합은 뷰잉 기기에서 사용 가능한 총 그리드 줄 수를 초과해서는 안 됩니다.
예를 들어, 데스크톱 기기(그리드 줄 12개)에서 3열 레이아웃 내의 개별 열은 각각 오프셋 없이 그리드 줄 4개에 걸쳐있거나 그리드 줄 3개에 각각 오프셋 1개가 있거나, 하나의 열이 그리드 줄 10개에 걸쳐있고 나머지 열 2개가 각각 1개에 걸쳐있을 수 있습니다.
그래서 열이 겹치지 않으며, 한 곳에서 오프셋이나 스팬 값을 늘리려면 먼저 다른 곳에서 값을 줄여야 하는 경우도 있습니다.
그리드의 각 열에는 측면에 컬러 옵션이 있습니다. 이것은 드래그 핸들이며 클릭한 상태로 왼쪽 또는 오른쪽으로 끌면 블록 크기를 조정할 수 있습니다.
사이드바의 블록 설정 내에서 오프셋 및 스팬 값을 직접 변경하여 레이아웃 그리드의 열 크기를 조정할 수도 있습니다.
드래그 핸들을 사용할 때 자동으로 조정됩니다.
그리드 크기를 조정하고 모바일 장치 및 태블릿 기기에서 열이 표시되는 방식을 조정하려는 경우에는 개별 열에 대한 모든 오프셋 및 스팬 값의 합이 태블릿 기기의 경우 그리드 줄 8개, 모바일 장치의 경우 그리드 줄 4개를 초과해서는 안 된다는 점에 유의하세요.
아래 예에서는 모바일에서는 2개의 열을, 태블릿에서는 4개의 열을 각각 표시하기 위해 열의 스팬은 2로, 오프셋은 0으로 설정했습니다.
지원 