색상 코드 변환
HEX, RGB, HSL과 투명도를 변환하고 색을 미리 보며 바로 쓸 수 있는 CSS 값을 복사합니다.
CSS Grid 생성기
고정·자동 열 구성과 간격·정렬을 미리 보고 CSS와 HTML을 생성하세요.
도구 소개
카드 목록을 만들기 전에 미리보기 너비를 바꾸며 배치를 확인할 수 있습니다.
사용 방법
고정 열 개수 또는 최소 열 너비에 따른 자동 배치를 선택하세요. 행·간격·정렬·항목 수를 조절하고 미리보기 너비를 줄여 좁은 화면도 확인할 수 있습니다.
CSS와 HTML을 각각 복사하거나 저장하세요. 너비 조절은 미리보기에만 적용됩니다. 고정 행·열은 1–12개, 간격은 0–80 px, 항목은 48개까지입니다. 생성 코드에 실제 내용과 디자인을 추가하세요.
자주 묻는 질문
너비에 따라 열 수가 바뀌게 하려면 어떻게 하나요?
자동 맞춤을 선택하고 최소 열 너비를 지정하세요. 출력은 auto-fit과 minmax를 사용합니다. 미리보기 너비 자체는 CSS에 포함하지 않습니다.
설정한 행 수보다 더 많은 행이 생기는 이유는 무엇인가요?
행 수는 명시적 트랙을 정하며 항목 수의 상한은 아닙니다. 고정 3열, 2행에는 처음 6개 칸이 있고, 7번째 항목을 넣으면 암시적 행이 추가됩니다. 여섯 칸만 미리 보려면 항목 수도 6으로 줄이세요.
관련 도구
새 탭에서 열립니다
댓글
0