2017-12-12 10 views
2

폭 그리드가이 이미지와 같이 컨테이너 폭의 100 %로 확장되는 것을 볼 수 있습니다. enter image description hereCSS 그리드 자동으로 열이 나는 그리드를 정의하는 경우, 즉 것으로, CSS 그리드와 UI 작업을하고 있는데 약간 이상한 행동을보고 한

자동 영역의 내용을 그리드가 공간을 채우도록 강제 확장 할 경우, 문제는 사라질 것 같다. 그러나 필자가 보았던 모든 예와 이해는이 템플릿이 뷰포트 너비의 100 %까지 확장되어야 함을 의미합니다.

여기에 뭔가가 있습니까? 확실히 생각, 어떤 생각? 규칙에

답변

5

:

grid-template-columns: 50px auto 50px 

auto 값은 내용의 폭과 열 너비를 설정합니다. auto은 콘텐츠 기반을 의미합니다.

따라서 열의 너비는 행 너비와 관련이 없습니다.

50px + content width + 50px can be anything 

당신은 열이 남아있는 모든 공간을 사용하는 두 번째 열을 알려줄 수있는 분수 단위를 사용하여 다음 행의 폭을 기입하십시오. 여기

grid-template-columns: 50px 1fr 50px 

자세한 내용 : Does CSS Grid have a flex-grow function?