CSS 그리드 레이아웃, 자동으로 행 추가 및 열 너비를 최대 그리드 항목 너비로 설정
P粉818317410
P粉818317410 2024-03-28 11:13:36
0
1
432

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

으아아아 으아아아

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

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

P粉818317410
P粉818317410

모든 응답(1)
P粉787820396

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

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

으아악

여기 고정 크기

으아악

다른 부분은

으아악

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

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

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

🎜 으아악 으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿