[CSS] grid로 채워지지 않는 커팅 라인

CSS천류.

견본

하고 싶은 말은 아래의 샘플을 보시면 이해할 수 있습니다.

부분적인 출처만 있으면

<div class="line"><span>gridキリトリ線</span></div>

.line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 40px;

  &::before,
  &::after {
    height: 1px;
    content: '';
    display: block;
    background-image: linear-gradient(to right, #000 10px, transparent 10px);
    background-size: 20px 1px;
  }
}

해설

항상 절단선과 제목의 구분선으로 소개되는 방법은 선을 문자 뒤에 놓고 문자를 흰색(배경과 같은 색)으로 칠하는 것이다.
그러나 이런 방법으로는 배경색이 변하는 상황에 대응할 수 없다.
display: grid; 이루면 똑똑히 이룰 수 있다.
어떻게 배치를 했냐면요.::before（左側の線） span（文字） ::after（右側の線）세 가지 요소grid-template-columns: 1fr auto 1fr;자, 배열.
span의 폭은 auto에서 문자량에 따라 결정됩니다
::before와::after는 각각 나머지 부분을 사용하여 너비를 동일하게 합니다.

샘플에서 소개한 바와 같이 grid,flex를 채우지 않는 실현은 가능하지만
grid라면 부모에게 넓이를 지정할 수 있어 가볍기 때문에 grid에 소개했다.