Create a responsive 3-column layout with dynamic styling.

by 규연 황

HTML

<ul>
  <li>
    <span>2025.09.09</span>
    <span>HTML</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, incidunt!</span>
  </li>
  <li>
    <span>2025.09.09</span>
    <span>CSS</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, incidunt!</span>
  </li>
  <li>
    <span>2025.09.09</span>
    <span>HTML</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, incidunt!</span>
  </li>
</ul>

<!-- https://x.com/tak_dcxi/status/1947491791089111458 -->

CSS

/* 가로형 뉴스 목록 구현
flex 대신 subgrid를 사용하여 각 항목을 정렬합니다.
날짜 섹션을 고유 최대 너비로 설정하고, fit-content(10rem)을 사용하여 
카테고리 섹션의 너비를 고유 크기로 설정하되 최대 너비는 10rem으로 설정합니다.
fit-content() 함수는 사소하지만 유용하므로 기억해 두는 것이 좋습니다. */


ul {
  display: block grid;

  /* 3열 그리드 레이아웃 정의
   * 1열: 콘텐츠에 맞춘 최소 너비 (날짜)
   * 2열: 최대 10rem까지의 가변 너비 (카테고리)
   * 3열: 남은 사용 가능한 모든 너비를 사용 (제목) */
  grid-template-columns: max-content fit-content(10rem) minmax(0, 1fr);

  padding-inline: 1.5rem;
  box-shadow: 0 20px 40px -14px oklch(from black l c h / 25%);
  background-color: var(--color-lightest);

  & > * {
    grid-column: 1 / -1;
  }
}

li {
  display: block grid;
  grid-template-columns: subgrid;
  column-gap: 1.5rem;
  align-items: baseline;
  padding-block: 1rlh;

  & + & {
    border-block-start: 1px solid var(--color-light);
  }
}