첫 번째 열의 전체 높이에 걸쳐 하나의 항목이 포함된 3개의 열로 구성된 그리드 레이아웃을 구현합니다.

Question

CSS에서 1개의 열 콘텐츠를 오프셋하고 싶습니다. 다음을 수행하는 것만 큼 간단하다고 생각합니다. 이제 이는 상단을 오프셋하지만 두 번째 열이 첫 번째 열의 높이(여백 포함)와 일치하게 만듭니다. 첫 번째 열을 어떻게 오프셋할 수 있나요?

https://jsbin.com/delobaluga/edit?html,css,output

으으으으

Answer 1

두 번째 열의 높이를 그대로 유지하면서 첫 번째 열을 오프셋하려면 첫 번째 열의 여백 대신 패딩을 사용할 수 있습니다. 패딩은 요소의 콘텐츠 영역에 영향을 주고, 마진은 주변 영역에 영향을 주기 때문에 첫 번째 열에 패딩을 추가하면 크기가 늘어나고 그 안의 콘텐츠가 오프셋되지만 두 번째 열의 높이는 영향을 받지 않습니다. .

다음으로 개선된 코드는 다음과 같습니다.

으아아아