CSS Grid 생성기
시각적으로 CSS Grid 레이아웃을 빌드합니다. 열, 행, 간격을 정의하고 생성된 CSS 코드와 함께 실시간 미리보기를 봅니다.
1
2
3
4
5
6
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
column-gap: 10px;
row-gap: 10px;
justify-items: stretch;
align-items: stretch;
}CSS Grid Layout - 기술 세부 정보
CSS Grid is a two-dimensional layout system for the web. Define rows and columns with grid-template-rows and grid-template-columns. Use fr units for flexible sizing, repeat() for patterns, and gap for spacing between cells.
명령줄 대안
/* Common grid patterns */\n.container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n}