전통적인 CSS Grid와 Flexbox에 대한 통찰 요약

Source: Dev.to

Inline Direction (left → right in most writing modes)

• Properties beginning with justify- generally control alignment along the inline axis.
• justify-content – 컨테이너에 사용되어 여분의 공간이 있을 때 인라인 축을 따라 트랙(그리드) 또는 플렉스 아이템(플렉스박스)을 정렬합니다.
• justify-items – 그리드 컨테이너에 사용되어 그리드 셀 안의 그리드 아이템들의 기본 인라인 축 정렬을 정의합니다.
• justify-self – 특정 그리드 아이템에 적용하여 해당 아이템에 대해 justify-items 값을 덮어씁니다.

Block Direction (top → bottom in most writing modes)

• Properties beginning with align- generally control alignment along the block axis.
• align-content – 컨테이너에 사용되어 여분의 공간이 있을 때 블록 축을 따라 그리드 트랙 또는 플렉스 라인을 정렬합니다.
• align-items – 컨테이너에 사용되어 교차 축을 따라 아이템들의 기본 정렬을 설정합니다.
  • 그리드에서는 교차 축이 블록 축과 동일합니다.
  • 플렉스박스에서는 flex-direction에 따라 교차 축이 결정됩니다.
• align-self – 개별 아이템에 사용되어 해당 아이템에 대한 align-items 값을 덮어씁니다.

Note: justify-items는 플렉스박스에서는 동작하지 않으며, 그리드 컨테이너에만 적용됩니다. align-content는 그리드와 플렉스박스 모두에서 동작하지만, 플렉스박스에서는 여러 플렉스 라인이 존재할 때(flex-wrap: wrap 등)만 효과가 있습니다.

Grid auto‑flow

With grid-auto-flow: row

• 열은 grid-template-columns에 의해 결정됩니다.
• 사용 가능한 셀보다 아이템이 더 많으면 새로운 행이 자동으로 생성됩니다.

With grid-auto-flow: column

• 행은 grid-template-rows에 의해 결정됩니다.
• 추가 아이템이 있으면 새로운 열이 대신 생성됩니다.

Defining tracks

• grid-template-columns / grid-template-rows – 명시적인 그리드(직접 선언한 트랙)를 정의합니다.
• grid-auto-columns / grid-auto-rows – 추가 아이템으로 인해 새 행이나 열이 필요할 때 암시적으로 생성되는 트랙의 크기를 정의합니다.

Common responsive grid patterns

/* Fixed‑width columns, fill the container */
grid-template-columns: repeat(auto-fill, 200px);

• 고정 너비(200 px) 열을 생성합니다. 브라우저는 컨테이너에 가능한 한 많은 열을 배치하고, 남은 공간은 행 끝에 남을 수 있습니다.

/* Flexible columns with a minimum size */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

• 각 열은 최소 200 px이지만 더 커질 수 있습니다. 남은 공간은 1fr을 사용해 분배됩니다. 200 px 열을 추가로 배치할 수 있을 만큼 공간이 있으면 브라우저가 자동으로 새 열을 추가합니다.

Grid template areas

grid-template-areas:
  '. . .'
  '. . .';

• 각 문자열은 행을 나타내며, 각 값은 열 셀을 나타냅니다. 이는 3열 × 2행 그리드를 만듭니다. grid-template-areas는 주로 레이아웃 영역에 이름을 붙이는 용도로 사용되며, 단순히 트랙 수를 정의하는 것이 목적은 아닙니다.

Track sizing keywords

• min-content – 트랙을 오버플로우 없이 가능한 가장 작은 크기로 축소합니다. 텍스트는 필요에 따라 줄바꿈되며, 일반적으로 가장 긴 끊을 수 없는 단어까지 줄어듭니다.
• max-content – 트랙을 확장해 모든 콘텐츠가 한 줄에 들어가게 합니다(줄바꿈 없음). 컨테이너가 커져도 더 이상 커지지 않습니다.
• fit-content(200px) – 트랙이 콘텐츠에 맞게 성장하되 200 px를 초과하지 않도록 합니다.
• auto – 트랙을 콘텐츠와 사용 가능한 공간을 기준으로 크기를 정합니다. minmax(min-content, max-content)와 비슷하게 동작하지만, 여유 공간이 있으면 늘어날 수도 있습니다.

---

이러한 치트‑시트 형식의 항목들은 긴 글을 다시 찾아볼 필요 없이 코딩 중에 빠르게 기억해두기에 유용합니다. 더 많은 인사이트를 추가하거나 오류를 지적하거나, CSS 레이아웃 규칙을 기억하기 위한 본인만의 모델을 공유해 주세요.