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