빠른 팁 : 열 행을 CSS 하위 그리드로 정렬하는 방법

이 CSS 그리드 하위 그리드 자습서는 형제 상자 내에서 컨텐츠를 정렬하는 것을 보여줍니다. 상자 자체가 그리드를 사용하여 올바르게 크기를 조정하더라도 수평으로 정렬 된 상자의 잘못 정렬 된 내부 구성 요소 문제를 해결합니다.

솔루션은 CSS 그리드의 속성을 ​​활용합니다. 이를 통해 내부 그리드가 부모 그리드에서 열 구조를 상속하여 일관된 정렬을 보장 할 수 있습니다. 1 단계 : 기본 설정 html은 각각 , 및 를 포함하는 3 개의 를 포함하는 부모를 사용합니다. 초기 CSS는 부모를 3 개의 동일한 열을 가진 그리드로 설정합니다. subgrid

2 단계 : 서브 그리드 활성화 를 사용하려면 를 사용하려면 각각

도 그리드 여야합니다.

이것은 각 섹션 내의 내용이 해당 열을 채 웁니다. <article></article>. <section></section> <h1></h1> 3 단계 : 서브 그리드와 정렬 <ul></ul> 중요한 단계는 <div> css 내에서 및 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>article { display: grid; grid-template-columns: 1fr 1fr 1fr; }</pre><div class="contentsignin">로그인 후 복사</div></div>를 설정하는 것입니다. <p> 내부 그리드가 부모의 행 구조를 상속합니다. <in> 내부 컨텐츠가 모든 행에 걸쳐 있는지 확인합니다. <any> 부모 그리드에서 상속 된 간격을 제거합니다 <img src="https://img.php.cn/upload/article/000/000/000/173897521347074.jpg" alt="Quick Tip: How to Align Column Rows with CSS Subgrid "> </any></in></p> 브라우저 호환성 : <p> <support> 하위 그리드 지원은 이제 주요 브라우저에서 우수합니다 <strong> 추가 리소스 : </strong> </support></p> <sub> mdn 서브 그리드 참조 예제 서브 그리드 데모 에 의한 <example> 그리드 Rachel Andrew의 Subgrid YouTube 설명 <code>subgrid 이 개선 된 버전은 핵심 단계에 중점을두고 Markdown 내에 직접 이미지를 통합하여보다 간결하고 구조화 된 설명을 제공합니다. 결론은 또한 추가 학습을위한 관련 자원과 관련이 있습니다. <section></section>

위 내용은 빠른 팁 : 열 행을 CSS 하위 그리드로 정렬하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!