인프런 커뮤니티 질문&답변
작성한 질문수
css grid repeat() 에서 autofit 사용시
작성
·
66
0
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 600px));
/* grid-template-rows: repeat(3, minmax(100px, auto)); */
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">a</div>
<div class="grid-item">b</div>
<div class="grid-item">c</div>minmax의 최소값은 적용이 안되고 최대값만 적용 되는게 맞나요?
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. samkookji12님 질문 감사드립니다.
CSS Grid에서 auto-fit과 minmax(200px, 600px)을 사용하면 반복된 그리드 항목들은 200px의 최소 너비와 최대 600px까지의 너비를 가지게 됩니다. 그러나, 중요한 점은 auto-fit과 auto-fill의 동작에 따라 빈 공간 처리 방식이 다르다는 것입니다.
auto-fit: 가능한 많은 그리드 셀을 생성하고, 사용 가능한 공간이 넘치면 그 공간이 빈 요소로 남습니다. 따라서, 요소가 600px을 넘는 경우가 없습니다.auto-fill:auto-fit과 유사하지만, 셀이 꽉 차지 못하면 공간이 빈 placeholders로 남게 됩니다. 이 경우에도 최대값은 여전히 600px으로 유지됩니다.
따라서 질문하신 것처럼 최소값이 적용되지 않고 최대값만 적용되는 것이 아니라, 가로 공간에 따라 최소 200px 이상 최대 600px 이하로 셀의 크기가 조정됩니다.
관련하여 더 많은 설명을 원하시면 다음의 기존 답변을 참고하시면 도움이 될 것입니다:
- auto-fill, minmax(200px, auto) 중 auto에 대해서
이미 설명된 내용을 참고하시어 이해가 어려운 부분이나 추가적인 질문이 있으실 경우, 댓글로 이어서 문의해 주시면 더 자세히 설명드리겠습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.