그리드 생성기 무료 | CSS Grid와 Flexbox 레이아웃 코드 설계

열 개수, 간격, 정렬, Flex 방향을 조정하면서 CSS Grid와 Flexbox 레이아웃 코드를 실시간으로 설계할 수 있습니다.

실시간 미리보기

선택한 카드 카드 1

카드를 클릭해 크기를 다르게 설정하세요.

CSS 코드

.layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 104px;
  gap: 16px;
  padding: 20px;
  justify-items: stretch;
  align-items: stretch;
}

.layout-item {
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #dbeafe;
}

HTML 예시

<div class="layout">
  <div class="layout-item item-1">카드 1</div>
  <div class="layout-item item-2">카드 2</div>
  <div class="layout-item item-3">카드 3</div>
  <div class="layout-item item-4">카드 4</div>
  <div class="layout-item item-5">카드 5</div>
  <div class="layout-item item-6">카드 6</div>
</div>

사용 방법

파일 추가

Grid 또는 Flexbox 모드를 선택합니다.

설정 조정

열 개수, 간격, 정렬, 아이템 수를 조정합니다.

결과 확인 후 다운로드

미리보기를 확인한 뒤 CSS와 HTML 코드를 복사합니다.

실사용 시나리오

카드 리스트, 대시보드, 랜딩 섹션처럼 반복 레이아웃을 빠르게 시안화하고 코드까지 바로 가져갈 수 있습니다.

랜딩 페이지 카드 섹션의 열 수와 간격을 빠르게 비교할 때 사용합니다.

대시보드 UI에서 Grid와 Flexbox 배치 차이를 바로 확인합니다.

초기 시안 단계에서 개발자와 디자이너가 같은 레이아웃 코드를 기준으로 논의할 수 있습니다.

같이 쓰면 좋은 다른 툴

작업 시간을 더 단축해줄 도구들을 추천합니다.

전체 보기

그라데이션 생성기

각도와 색상을 지정해 CSS 그라데이션 코드를 생성합니다.

랜덤 팔레트 생성기

클릭 한 번으로 조화로운 색상 팔레트를 랜덤 생성합니다.

컬러 피커

색상을 고르고 HEX, RGB, HSL 값을 바로 확인합니다.