-
[CSS Grid] min-content, max-contentHTML & CSS 2021. 9. 3. 12:57
min-content, max-content 를 사용하면 그리드 안의 content 의 크기에 맞게 박스 크기를 조절할 수 있음.
min-content : content 에 맞게 박스가 최소화
max-content : content 에 맞게 박스가 최대화
minmax, auto-fit 등과 함께 사용하면 컨텐츠 사이즈에 맞는 반응형을 만들 수 있음.
예시 1. min-content
<div class="grid"> <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut </div> <div class="item">Lorem ipsum</div> </div>
.grid { color: white; display: grid; gap: 5px; grid-template-columns: min-content min-content; grid-auto-rows: 100px; margin-bottom: 30px; } .item:nth-child(odd) { background-color: skyblue; } .item:nth-child(even) { background-color: blueviolet; }
예시 2. max-content
.grid { color: white; display: grid; gap: 5px; grid-template-columns: max-content max-content; grid-auto-rows: 100px; margin-bottom: 30px; } .item:nth-child(odd) { background-color: skyblue; } .item:nth-child(even) { background-color: blueviolet; }
예시 3. repeat() 와 max-content
<div class="grid"> <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div> <div class="item">Lorem ipsum</div> <div class="item">Lorem ipsum dolor sit</div> <div class="item">Lorem ipsum</div> <div class="item">Lorem ipsum dolor sit amet, consectetur</div> </div>
.grid { color: white; display: grid; gap: 5px; grid-template-columns: repeat(5, max-content); grid-auto-rows: 100px; margin-bottom: 30px; } .item:nth-child(odd) { background-color: skyblue; } .item:nth-child(even) { background-color: blueviolet; }
예시 4. repeat() 와 min-content
.grid { color: white; display: grid; gap: 5px; grid-template-columns: repeat(5, min-content); grid-auto-rows: 100px; margin-bottom: 30px; } .item:nth-child(odd) { background-color: skyblue; } .item:nth-child(even) { background-color: blueviolet; }
예시 5. minmax() 와 max-content
.grid { color: white; display: grid; gap: 5px; grid-template-columns: repeat(5, minmax(max-content, 1fr)); grid-auto-rows: 100px; margin-bottom: 30px; } .item:nth-child(odd) { background-color: skyblue; } .item:nth-child(even) { background-color: blueviolet; }
여기서 2번째, 4번째 박스를 보면, max-content 가 아니라 1fr 이 적용된 것을 볼 수 있음. 1,3,5 박스의 max-content 를 주고 나머지 박스에 1fr 이 적용된 것.
예시 6. auto-fit 과 max-content
.grid { color: white; display: grid; gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, max-content)); grid-auto-rows: 100px; margin-bottom: 30px; } .item:nth-child(odd) { background-color: skyblue; } .item:nth-child(even) { background-color: blueviolet; }
큰 화면에서는 최대 너비가 max-content 이기 때문에 auto-fit 을 해도 더 늘어나지 않음.
작은 화면에서는 최소 너비인 100px을 유지하는 모습.
'HTML & CSS' 카테고리의 다른 글
[CSS Grid] minmax 로 반응형 만들기 (0) 2021.09.03 [CSS Grid] grid-auto (0) 2021.09.03 [CSS Grid] 그리드 정렬 (0) 2021.09.03 [CSS Grid] 그리드 기초, 그리드 템플릿 (0) 2021.09.02 [HTML] HTML 과 HTML 코드의 구성 (0) 2021.04.03