• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.

23.02.27 00:37 작성 23.02.27 12:32 수정 조회수 354

0

Q1: auto-fill 에 대해 질문드립니다.

<Grid #3 강의의 4:30초> 에서

셀이 2개 있고, grid-template-columns에 minmax(200px, auto)가 설정되어 있으며 auto-fill이 적용되어 있을때

grid-template-columns: repeat(auto-fill, minmax(200px, auto))

전체 Grid Container의 넓이가 500px 일때에, 셀의 column 길이가 200px 이상이 되어지게 됩니다.

제가 알기로는 minmax(최솟값, auto) 라면 셀의 길이가 최솟값 보다 커지려면 셀이 가지는 컨텐츠의 길이가 최솟값보다 커야된다고 알고 있는데요.

그런데 왜 auto-fill이 설정되어 있을때에는 컨텐츠의 column 길이가 200px 보다 작은데 왜 Grid Container의 넓이 만큼 늘어나는 것인가요?

이것이 auto-fill을 적용하여 Grid의 기본 성질인 꽉 차게 늘어나는 성질때문에 그런가요?

Q2 auto-fill 적용불가에 대해 질문드립니다.

저의 브라우저에서 테스트 해본결과, auto-fill이 적용이 되지 않는 부분은

셀이 2개가 있고, column의 길이가 minmax(200px, auto) 이며, auto-fill을 사용하고, Grid Container의 넓이가 600px 초과 된다면,

셀이 가지는 column의 길이가 원래는 Grid Container의 길이만큼 꽉차게 늘어나다가 200px이 가질 수 있는 크기를 넘어서게 되니 꽉차지 않게 되는 것 같습니다.

위의 질문과 동일한 것같습니다만,

자동으로 늘어나는 것은 400px (200px 셀 2개) 의 크기보다 Grid Container의 길이에서 뺀것의 크기가 200px 이상이라면 자동으로 늘어나는 것이 중단되고,

200px 이하라면 늘어나는 것이 되는 것인데,

왜 200px 이하라면 늘어나는 것입니까? Grid Container의 넓이를 200px으로 나눌때 나머지가 200px 보다 작다면 그냥 Grid의 성질에 의해 늘어나는 것인가요?

 

Flex만 사용하던 사람이라 minmax의 대한 성질과 auto-fill을 공부하니 약간 했갈리네요...

답변 1

답변을 작성해보세요.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.05.24

안녕하세요, 인프런 AI 인턴이에요.

Q1. auto-fill을 사용할 때, Grid Container의 넓이가 500px이상을 넘으면 셀의 column 길이가 200px이상이 되어지게 됩니다. minmax(200px, auto)가 설정되어 있으므로, 컨텐츠의 길이가 최소값 200px보다 작을 때에는 최소값 200px로 지정되어 있는 것을 의미합니다. auto-fill을 사용하게 되면, Grid Container의 넓이에 맞게 셀이 자동으로 늘어갑니다.

Q2. auto-fill이 적용되지 않는 부분에서는, Grid Container의 넓이가 600px 초과되면 셀이 가지는 column의 길이가 원래는 Grid Container의 길이만큼 꽉차게 늘어나다가 200px이 가질 수 있는 크기를 넘어서면 더 이상 늘어나지 않는 것 같습니다. 이 부분은 Grid의 크기 설정 방식 때문인데요. Grid Container의 넓이를 200px으로 나눌 때 나머지가 200px 보다 작다면 그냥 Grid의 성질에 의해 늘어나는 것입니다.

이러한 부분들이 어려운 개념으로 느껴질 수 있는데, 조금씩 차근차근 공부하면 이해하실 수 있을 거예요!