CSS 그리드 레이아웃: 여러 행에 걸쳐 있는 요소의 기준선을 다른 열의 맨 아래 행에 정렬합니다.
<p>a와 c의 기준선을 정렬하고 싶습니다. </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#grid{
표시:격자;
그리드 템플릿 열: 1fr 1fr;
항목 정렬: 기준선;
}
#ㅏ{
그리드 행: 1 / 범위 2;
그리드 열: 1;
패딩: 8px;
배경: 빨간색;
}
#비{
그리드 행: 1;
그리드 열: 2;
배경: 노란색;
}
#씨{
그리드 행: 2;
그리드 열: 2;
배경: 파란색;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="grid">
<div id="a">aaaaa</div>
<div id="b">bbbbb</div>
<div id="c">ccccc</div>
</div></pre>
<p><br /></p>
<p>외부 그리드를 한 줄로 설정하고 inline-whatever 속성을 사용하여 div에서 b와 c를 래핑하려고 시도했지만 a는 여전히 항상 c 대신 b와 정렬됩니다. </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#grid{
표시:격자;
그리드 템플릿 열: 1fr 1fr;
항목 정렬: 기준선;
}
#ㅏ{
그리드 행: 1;
그리드 열: 1;
패딩:8px;
배경:빨간색;
}
#디{
디스플레이:인라인 블록;
그리드 행: 1;
그리드 열: 2;
}
#비{
배경:노란색;
}
#씨{
배경: 파란색
}</pre>
<pre class="brush:html;toolbar:false;"><div id="grid">
<div id="a">aaaaa</div>
<div id="d">
<div id="b">bbbbb</div>
<div id="c">ccccc</div>
</div>
</div></pre>
<p><br /></p>
<p>a와 c를 기준선에 맞춰 정렬하는 방법은 무엇입니까? </p>
