CSS 그리드 레이아웃, 자동으로 행 추가 및 열 너비를 최대 그리드 항목 너비로 설정

Question

나는 그리드 항목 수에 관계없이 그리드 레이아웃을 원합니다. 그리드 항목이 채워지면 다음과 같이 자동으로 새 행이 생성됩니다.

으아아아 으아아아

문제는 하드코딩을 원하지 않는다는 것입니다 75px. 이 값을 "가장 넓은 그리드 항목의 콘텐츠 너비"로 설정하는 방법이 있나요?

min-content로 75px 更改为 min-content，这似乎可以按照规范工作，但开发工具说这是无效的 CSS。我还尝试过仅设置 grid-auto-columns: min-content 而不是 grid-template-columns를 변경해 보았는데 사양에 따라 작동하는 것처럼 보였지만 개발 도구에서는 CSS가 유효하지 않다고 했습니다. 또한 grid-template-columns 대신 grid-auto-columns: min-content 설정을 시도했는데 너비가 올바르게 설정되는 것 같지만 각각에 대해서는 그렇지 않습니다. 그리드 항목 전체 행을 차지합니다.

Answer 1

짧은 대답은 '아니요'입니다. 하지만 이는 훌륭한 질문이며 실제로 지원되어야 하는 일반적인 사용 사례라고 생각합니다.

당신은 그리드 템플릿 열에 있을 것입니다. auto-repeat 관련 부분은

으아악

여기 고정 크기는

으아악

다른 부분은

으아악

즉, grid-template-columns에서 minmax()를 사용하여 자동으로 열을 생성할 때 grid-template-columns中使用minmax()自动生成列时，您的最小值或最大值需要为固定长度或百分比。您可以使用 max-content최소값 또는 최대값 ​​

고정된 길이 또는 백분율이어야 함을 의미합니다. . max-content를 minmax 표현식의 첫 번째 값으로 사용할 수 있지만 고정 길이나 백분율을 표현식의 두 번째 값으로 사용하는 경우에만 가능합니다. 매우 짜증나는 일이지, 그렇지? 왜 이런 제한이 존재하는지 이해하고 싶습니다.

이 문제를 고칠 수 있을까요? 이 예가 원하는 것에 더 가깝습니까?

🎜 으아악 으아악