＃Default 상황 :
- Div Container > Div Box 5개 (1,2,3,4,5)
- Container Box : display : grid , grid-template-rows : 100px 300px 100px / grid-template-columns : 200px 200px 100px
상황1_ 2-px 단위 vs fr단위
● 만약 Container Box의 width : 100% (브라우저 창 기준) 된다면, 창을 축소 확대할때 어떻게 될까
셀의 크기는 고정된 px로 설정됐기 때문에, 튀어나온다.
따라서 상대적 비율제로 하고싶다면, 맞춤 단위가 존재한다,
● grid - template : 100px 300px 100 / 200px 200px 100px
=> grid - template : 1fr 3fr 1fr / 2fr 2fr 1fr;
● 결론 :
- 부모 Box의 width , height 가 정확한 px 로 된 grid => px , fr 로 셀 나눌 수 있다.
- 부모 Box의 width , height 가 브라우저 창 기준 % 비율제 => fr 단위로 셀 나눠야 함
상황2_ minmax( 최소px||최소fr , 최소px||최소fr )
● 정의 :
1_ 화면 창이 작을 경우 => 더이상 셀이 졻아지지않고, 셀의 column/row가 최소 px값은 유지
2_ 화명 창이 커질 경우 => 셀끼리 비중(nfr)은 유지한체로 늘어난다는 뜻
● 내가 생각하기에 사용하는 이유 :
정의의 1번항목에 집중된 것 같음. 즉, 화명창이 줄었을 때, 셀이 완전 짜부는 안되고, 최소한 보일건 보이도록 유지하기 위함
● 사용 예시 :
grid - template - columns : repeat(3, minmax(200px,1fr));
grid - template - rows : repeat(3, minmax(400px,1fr));
// 브라우저 창이 줄었어도 최소한 셀의 width : 200px , height :400px 보다 작게 짜부되지않고 출력되어야한다는 뜻
○ 브라우저 창이 졻았을 때,
○ 브라우저 창이 늘렸을 때,
※연습문제 :
● 문제 조건 :
- 세 번 반복해서 쓴 값을 함수를 활용해서 간단하게 만든다.
- 각 셀의 크기를 화면 너비에서 1 : 1 : 1 이 되도록 유연하게 바꾼다.
- 셀의 최소 크기는 너비 200px, 높이 200px이 되도록 바꾼다. //minmax(200px,1fr)
● 해결방법 :
- grid-template - columns : repeat( 3, minmax(200px // 너비 최소 ,1fr ));
- grid-template - rows : repeat( 3, minmax(200px // 높이 최소 ,1fr ));
