GN⁺: CSS Grid Generator - 드래그 앤 드롭 CSS 그리드 생성기
(cssgridgenerator.io)- 맞춤형 CSS 그리드 레이아웃을 더 쉽게 만들 수 있도록 도와주는 도구
- 열, 행, 간격 크기를 마우스 동작으로 편하게 지정할 수 있음
- 사용 방법
- 열, 행, 간격을 필요에 맞게 지정
-
- 기호가 있는 사각형을 클릭하여 그리드에 새 요소를 추가
- 오른쪽 하단 모서리에 있는 핸들을 사용하여 DIV 크기를 조정
- 원하는 위치로 드래그 앤 드롭하여 DIV를 재배치
- 마지막으로 생성된 HTML 및 CSS 코드를 복사하여 프로젝트에 붙여넣음
- Tailwind Grid Generator를 만들어 긍정적인 피드백을 받았고, 이를 바탕으로 plain CSS용 도구를 개발
Hacker News 의견
- 몇 개의 박스를 추가한 후 겹치게 이동하면 그리드 경계를 벗어나는 문제가 발생함
- Tailwind Grid Generator를 만들어 긍정적인 피드백을 받았고, 이를 바탕으로 plain CSS용 도구를 개발함
- 그리드 설정보다 동적 재배열이 더 어려운 문제임
- MDN을 참고하여 그리드가 열을 줄이거나 늘리는 방법을 찾음
- 간단한 유틸리티가 반복적인 작업을 단순화하는 데 유용함
- 그리드 설정 상태를 URL에 저장하면 유용할 것 같음
- 생성기는 학습 도구로 유용하며, 구문과 기능을 이해하면 더 유연하게 사용할 수 있음
- Chrome Dev Tools도 그리드를 수정하여 즉시 변경 사항을 확인하는 데 유용함
- 그리드에 대한 게시물을 작성함
- 오래된 프로그래머로서 테이블을 사용한 그리드 작성에 익숙하지만, CSS 레이아웃은 어려움
- 이러한 도구가 매우 도움이 됨
- 몇 년 전 비슷한 사이트 생성기를 발견했지만 드래그 앤 드롭 기능이 없었음
- grid-template-columns, gap 등 CSS 그리드의 기본 개념을 배움
- 계속 좋은 작업을 이어가길 바람
- 그리드가 처음 나왔을 때, 템플릿 영역을 기반으로 웹 레이아웃을 근본적으로 변화시킬 것이라고 생각함
- 내부 프레임워크를 만들지 못하고 flex를 사용함
- Tailwind가 나와서 빠르게 반응형 프론트엔드를 작성하는 데 필요한 모든 것을 충족시킴
- 템플릿 영역을 사용하는 좋은 프레임워크나 예제를 알고 있는지 궁금함
- 다음에 그리드를 다룰 때 이 도구를 사용할 것임
- 두 가지 버그를 발견함
- 브라우저 창 크기를 조정하면 너비가 반응하지 않음
- 박스가 컨테이너보다 짧아서 새로운 행이 그리드에서 더 높게 위치함
- 웹 개발자는 아니지만, 12개 이상의 열이 필요한 경우가 있을 것 같음
- 더 큰 숫자를 입력하면 열이 이상하게 파싱됨
- UX가 매우 좋음
- 페이지 레이아웃을 자주 작성하지 않아 그리드 구문을 깊이 배우지 않았지만, 이 도구를 북마크해 둘 것임