에디터 X: 그리드 사용하기

CSS 그리드는 요소를 구조화된 방식으로 구성할 수 있는 좋은 방법입니다. 에디터 X에서는 모든 컨테이너 및 섹션에 그리드가 내장되어 있습니다. 컴포지션에 필요한 행과 열의 수를 선택하고 다양한 크기로 크기를 조정할 수 있습니다. 

모든 섹션과 컨테이너에는 조정할 수 있는 1x1 그리드가 내장되어 있습니다. 클릭 한 번으로 다른 레이아웃으로 전환하거나 기존 컴포지션 위로 선을 끌어 고유 그리드를 생성할 수 있습니다. 

그리드를 사용자 지정해 원하는 정확한 레이아웃을 완성하세요. 행 및 열 수를 변경하고 크기 및 간격을 조정할 수 있습니다.

요소를 추가하고 그리드에 배치할 때 반응형 레이아웃을 만드는 데 도움이 되는 다양한 도구가 있습니다.

그리드라인에 요소를 도킹하면 원하는 위치에 정확하게 배치할 수 있습니다. 그리드 셀에 요소를 추가하면 가장 가까운 세로 및 가로 그리드라인에 자동으로 고정됩니다. 속성 패널에서 필요에 따라 도킹을 조정할 수 있습니다. 

속성의 위치 섹션에서 요소를 선택하고 해당 요소가 배치된 그리드 셀을 확인할 수 있습니다. 그리드 셀을 클릭하면 드래그-앤-드롭을 사용할 필요 없이 요소를 이동할 수 있습니다. 

클릭 한 번으로 요소를 늘려 그리드 셀을 채울 수 있습니다. 요소가 둘 이상의 셀의 그리드라인 위에 배치된 경우, 요소가 위치한 모든 셀에 걸쳐 늘어납니다.

전체 CSS 단위를 사용해 그리드를 생성하세요. 백분율, 픽셀 또는 프랙션을 사용해 행과 열의 크기를 설정할 수 있습니다. 열과 행의 최소 및 최대 크기를 설정하고 계산을 사용해 필요한 그리드를 생성할 수도 있습니다.