고정 열 및 열 위치와 그리드 자동 레이아웃 혼합

Question

CSS 그리드가 포함된 다음 HTML이 있습니다

으아악 으아악

중요한 부분은 .main-item그리드에 고정된 위치가 있다는 것입니다.

이제 그리드에 25개의 셀을 추가합니다.

으아악

문제는 이러한 요소가 .main-item 的位置（将其视为不存在）。不过，CSS 目前已对此进行了纠正，并使元素围绕 .main-item의 위치를 ​​무시하기를 원한다는 것입니다(존재하지 않는 것처럼 처리). 그러나 CSS는 현재 이를 수정하고 요소가

주위로 흐르도록 만듭니다. 나는 다음과 같은 보조 동작을 원합니다:

style.gridRow 和 style.gridColumnJavaScript에서

를 설정하면 이 문제를 수정할 수 있습니다

으아악

JS에서 다른 모든 요소를 ​​설정하지 않고 이 작업을 수행할 수 있는 방법이 있나요? 고정 요소가 흐름 수정에 영향을 미치지 않도록 하는 CSS가 있습니까?

코드펜 링크🎜

Answer 1

그리드에 상대 위치를 부여하고 특정 그리드 항목을 절대적으로 배치할 수 있습니다.

으아악 으아악 으아악