Grid & clamp

먼저 CSS GRID를 보고가자

 

grid의 기본구조

// 가장 기본적인 grid
css={css`
	display : grid;
    grid-template-columns : 1fr 1fr 1fr; // 3개열 같은 크기
    grid-template-rows : 100px 200px; // 2개 행, 다른 크기
    gap : 20px; // 간격
`}

그리드 용어

- grid container : display grid가 적용된 부모요소

- grid item : grid container 안의 직접 자식 요소들

- grid line : 격자를 구성하는 선들

- grid track : 행 또는 열

- grid cell : 한칸

- grid area : 여러 셀을 합친 영역

 

fr 단위

css={css`
	grid-template-columns : 1fr 2fr 1fr;
    // 첫번째 열 25% 두번째 열 50% 세번째 열 25%
`}

 

 

 

계단식 반응형

 

 

clamp() 함수

clamp(250px, 30vw, 400px)
// 최소값, 선호값, 최대값

동작방식

1. 30vw 뷰포트 너비의 30%를 기본으로 사용

2. 250px 보다 작아지면 250px로 고정

3. 400px 보다 커지면 400px로 고정

실제 계산 예시

화면 1600px → 30vw = 480px → 400px로 제한 (최대값)
화면 1200px → 30vw = 360px → 360px 사용 (선호값)
화면 800px  → 30vw = 240px → 250px로 제한 (최소값)