[INFORMATION] 그리드 레이아웃 계산기 사이트 gridcalculator

gridcalculator.dk/

 

요즘 대 AI시대라지만 그래도 가끔은 직접 레이아웃을 잡고 디자인을 할 때 참고하면 좋은 사이트 입니다!

사용법은 매우 직관적인데 먼저 사용할 컨텐츠의 전체 넓이를 잡는 방법은

Max-width'라고 써 있듯이 화면을 구성하고자하는 전체 넓이를 입력히시면 됩니다.

다음으로 'Gutter width' 탭을 클릭하시면 아래쪽에 선택한 부분에 대한 영역이 표시됩니다.

해당 영역은 각 박스들 사이의 간격을 조정해줍니다.

다음으로 'Columns' 탭을 클릭하면 아래쪽의 박스영역들이 선택된 것을 볼 수 있습니다.

해당 부분의 숫자는 컨텐츠박스의 갯수를 의미합니다.

 

 

마지막 'Margin width' 탭을 클릭하면 전체 영역의 끝 부분이 위의 사진과 같이 표식됩니다.

 

각 영역에 원하는 값을 입력하시면 실시간으로 반영이 되면서 박스 크기들도 변하는 모습을 볼 수 있습니다.

또 'Margin width' 탭 옆에는 컨텐츠박스 크기가 표시됩니다.

 

그다음으로 살펴볼 기능은 Download grid for 영역입니다.

원하는 레이아웃 크기와 각 영역, 컨텐츠 갯수를 설정 한 후

하단에 있는 'Iliustrator','Photoshop',png image' 중 원하는 컨텐츠를 클릭하면 자동으로 다운로드가 됩니다.