CSS Grid에서 Tailwind로

grid-template-columns: repeat(3, 1fr) → grid-cols-3. 커스텀 트랙은 arbitrary 값.

균등한 그리드는 변환이 매끄럽습니다. grid-template-columns: repeat(3, 1fr)은 grid-cols-3에 대응됩니다. 단위가 섞인 트랙은 임의 값이 되고, 이름 있는 영역은 CSS에 두는 편이 낫습니다.

명시적 템플릿

고정 fr의 grid-template-columns는 대개 grid-cols-*로 맵핑됩니다. 드문 분수나 복잡한 minmax는 brackets 또는 CSS입니다.

이름 있는 영역

grid-template-areas는 거의 1:1이 아닙니다. 영역은 CSS에 두거나 마크업을 단순화하세요.

gap과 auto-flow

gap-*와 grid-flow-*가 일상 대부분을 커버해 행/열을 손으로 만질 일이 줄어듭니다.

사용해보기

변환기 열기

.example { display: flex; gap: 1rem; padding: 1rem; }

신뢰 메모: 결과를 시각적으로 확인하세요. 변환기는 초안용 도우미입니다.