Elementor에는 컨테이너를 위한 두 가지 레이아웃 모드인 Flexbox와 Grid가 있습니다. 어느 모드를 사용하게 되는지는 클래스 이름이 아니라 브라우저가 해당 요소에 대해 실제로 계산하는 display 값에 따라 결정됩니다.
display:flex → Flexbox 컨테이너
변환기는 중요한 속성들을 그대로 가져옵니다: 방향(행/열), 줄 바꿈, justify-content, align-items, 간격. 따라서 flexbox로 만든 가로 카드 행은 방향 = 행이고 CSS에서 지정한 것과 동일한 간격을 가진 컨테이너로 변환됩니다.
display:grid → Grid 컨테이너
Grid 레이아웃은 Grid 컨테이너가 되며, 편집기에서는 구조 패널에 grid 아이콘과 함께 Grid라고 표시합니다. 열, 행, 간격 및 항목 정렬 옵션이 모두 변환됩니다.
동일한 열은 fr로 유지됩니다
이 부분은 이해할 가치가 있습니다. 브라우저는 grid-template-columns: repeat(5, minmax(0, 1fr))를 실제 픽셀 값으로 해석합니다. 예를 들면 241.597px 241.597px 241.604px …과 같습니다. 아주 작은 서브픽셀 차이에 주목하세요. 변환기가 이 문자열을 단순 비교한다면 열이 서로 다르다고 판단하고 고정 픽셀 너비를 기록할 것이며, 그러면 그리드가 반응형으로 작동하지 않게 됩니다.
대신 열을 수치적으로 허용 오차를 두고 비교하여, 거의 동일한 트랙은 같은 것으로 인식하고 N fr로 기록합니다. 이렇게 하면 컨테이너 크기가 변할 때 재배치되는 진정한 반응형 그리드가 됩니다. 실제로 비율이 다른 트랙(예: 2fr 1fr)은 사용자 지정 템플릿으로 보존됩니다.
행은 콘텐츠에 맞게 크기가 설정됩니다
행은 Elementor의 기본값인 동일 높이 행 대신 auto로 설정됩니다. 따라서 텍스트 길이가 다른 카드도 가장 높은 카드에 맞춰 늘어나지 않고 자연스러운 높이를 유지합니다.
너비, 패딩, 중앙 정렬 함정
매우 흔한 패턴은 중앙 정렬된 콘텐츠 열입니다: max-width: 760px; margin: 0 auto;. 여기서 브라우저는 auto를 현재 뷰포트에 따라 달라지는 실제 픽셀 값으로 해석합니다. 한 너비에서는 양쪽에 260px로 보고할 수 있습니다.
이 픽셀 값을 Elementor에 그대로 기록하면 화면 크기가 바뀌는 순간 중앙 정렬이 깨집니다. 따라서 최대 너비와 좌우 대칭 auto margin을 가진 블록은 자동 중앙 정렬로 감지되어 Elementor 방식으로 표현됩니다: 콘텐츠 너비 = 박스형과 최대 너비를 사용하면 어떤 화면 크기에서도 기본적으로 중앙 정렬됩니다. 해석된 좌우 margin은 버려집니다.
실용 팁
- grid/flex 자식 사이의 margin보다
gap을 우선 사용하세요. gap은 깔끔하게 매핑되지만 자식별 margin은 그렇지 않습니다. - 중앙 정렬 섹션에는
max-width+margin:0 auto를 사용하세요. 박스형 컨테이너로 올바르게 변환됩니다. - float을 flex/grid와 섞지 마세요. float은 Elementor에 대응하는 개념이 없어 수동 작업이 필요합니다.
- 모바일에서 행이 줄 바꿈되지 않아야 한다면 가져온 후 Elementor에서 설정하세요. 반응형 줄 바꿈 동작은 Elementor에서 조정하는 것이 더 쉽습니다.