CSS 그리드 레이아웃: 여러 행에 걸쳐 있는 요소의 기준선을 다른 열의 맨 아래 행에 정렬합니다.

Question

a와 c의 기준선을 정렬하고 싶습니다.

#grid{
  표시:격자;
  그리드 템플릿 열: 1fr 1fr;
  항목 정렬: 기준선;
}
#ㅏ{
  그리드 행: 1 / 범위 2;
  그리드 열: 1;
  패딩: 8px;
  배경: 빨간색;
}
#비{
  그리드 행: 1;
  그리드 열: 2;
  배경: 노란색;
}
#씨{
  그리드 행: 2;
  그리드 열: 2;
  배경: 파란색;
}

<div id="grid">
  <div id="a">aaaaa</div>
  <div id="b">bbbbb</div>
  <div id="c">ccccc</div>
</div>

외부 그리드를 한 줄로 설정하고 inline-whatever 속성을 사용하여 div에서 b와 c를 래핑하려고 시도했지만 a는 여전히 항상 c 대신 b와 정렬됩니다.

#grid{
  표시:격자;
  그리드 템플릿 열: 1fr 1fr;
  항목 정렬: 기준선;
}
#ㅏ{
  그리드 행: 1;
  그리드 열: 1;
  패딩:8px;
  배경:빨간색;
}
#디{
  디스플레이:인라인 블록;
  그리드 행: 1;
  그리드 열: 2;
}
#비{
  배경:노란색;
}
#씨{
  배경: 파란색
}

<div id="grid">
  <div id="a">aaaaa</div>
  <div id="d">
    <div id="b">bbbbb</div>
    <div id="c">ccccc</div>
  </div>
</div>

a와 c를 기준선에 맞춰 정렬하는 방법은 무엇입니까?

Answer 1

마지막 기준선은 비교적 새롭기 때문에(지원하지 않는 Electron 19를 사용하고 있습니다) 대안을 찾고 있습니다. flex에 관한 이 SO 게시물을 참조하면 인라인 블록을 다른 컨테이너에 래핑해야 한다는 것이 밝혀졌습니다.

으아아아 으아아아

Answer 2

당신이 align-items: 마지막 기준선을 선언하고 싶어한다고 생각합니다.

"align-items: 마지막 기준선을 사용할 수 있나요?" 글로벌 지원률은 85%입니다.

사양 용어는 Flex Container Baseline을 참조하세요.

으아악 으아악