CSS Grid 레이아웃을 시각적으로 만듭니다
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
justify-items: stretch;
align-items: stretch;
}행·열 개수와 간격을 조절하고 grid-template 값을 시각적으로 만들어 CSS Grid 코드를 생성합니다.
카드 목록·대시보드·갤러리처럼 행과 열이 함께 있는 레이아웃을 빠르게 잡을 때 씁니다.
repeat(auto-fill, minmax(240px, 1fr)) 처럼 쓰면 미디어 쿼리 없이 반응형이 됩니다. fr 단위는 남은 공간을 비율로 나눕니다.
빈 트랙을 남기느냐(auto-fill) 늘려 채우느냐(auto-fit) 의 차이입니다. 아이템이 적을 때 결과가 달라집니다.