grid-template-columns : inherit; 를 사용하는 브레이크 아웃 섹션과 함께 CSS Grid를 사용하는 레이아웃을 작업 중입니다. 기본적으로이 문서에 설명 된 기술을 사용합니다. https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/
이것은 grid-template-columns : inherit; 가 레이아웃을 깨는 것처럼 보이는 Edge 44를 제외한 주요 브라우저에서 잘 작동합니다. 상속 된 값을 손으로 복사하면 정상적으로 표시됩니다.
왜 이런 일이 발생하는지 아는 사람이 있으며 상속 된 값을 수동으로 복제하지 않고 문제를 해결할 수있는 방법이 있다면?
다음은 문제를 보여주는 짧은 코드 snippet입니다.
body {
display: grid;
grid-template-columns: [full-start] minmax(2em, 1fr) [main-start] minmax(0px, calc(500px / 2)) [main-right] minmax(0px, calc(500px / 2)) [main-end] minmax(2em, 1fr) [full-end];
}
.breakout {
background: grey;
width: 100%;
grid-column: full;
display: inherit;
grid-template-columns: inherit;
}
.content {
grid-column: main;
}<body>
<div class = "breakout">
<div class = "content">
<p> This is the content inside the breakout element. It should sit properly within the grid, but for some reason it breaks in Edge 44. </p>
</div>
</div>
</body>편집 : 문제는 calc () 상속에서 비롯된 것 같습니다. 버그 일 가능성이 있습니까?
