css grid repeat() 에서 autofit 사용시
181
작성한 질문수 8
.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에 대해서
이미 설명된 내용을 참고하시어 이해가 어려운 부분이나 추가적인 질문이 있으실 경우, 댓글로 이어서 문의해 주시면 더 자세히 설명드리겠습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
가로스크롤 과 margin: 0 -1rem 질문 있습니다
0
118
1
수업자료 다운로드
0
122
1
VS코드에 클래스 이름만 넣으셨는데 선생님이 뭘 누르면 바로 태그로 변하던데...
1
136
1
menu 아이템 반응형 변경
0
102
1
질문은 아니고.. 오타 발견..
0
120
1
웹에서 위치?값
0
211
1
px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?
0
510
2
강의에 나오는 html 자동으로 만들어주는 편집기에 대해 알 수 있을까요?
0
309
1
flex-basis auto, 0 차이
0
709
2
padding 대신 gap을 쓰는게 더 편하지 않나요?
2
606
1
animation forwards 관련 질문
0
488
2
auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.
0
559
1
flex-grow IE 질문드립니다.
0
624
2
Flex-grow가 적용되는 영역에 대해 질문드립니다.
0
437
1
Grid 수직정렬 문의
0
1075
1
card__item에 display:flex를 했을 때..
0
512
1
11vmin
0
417
1
header class 안에 div와 h2
0
576
1
grid 반응형 페이지 step1 질문있습니다~
0
281
1
반응형 페이지 step4 order
0
354
1
미디어쿼리 사이즈
1
285
1
figure + div
0
297
1
CSS Grid를 통한 정렬의 장점
0
244
1
19강 secondary-b영역에서 background가 안칠해지는 문제
0
208
1