flex, grid를 다루면서 고생했던 기록

개요

flex, grid를 다루면서 고생했던 점들을 다음에는 좀 덜 고생하게 정리하고자 한다.

(참고로 tailwindCSS로 프로젝트를 진행중이라 정리하는 코드도 tailwindCSS + React로 할것이다.)

 

1. grid container의 자식 요소에 고정의 너비길이를 부여했지만, 그 고정 너비보다 넓어질 때

나의 경우에는 컨테이너 너비의 영향이 원인이었다. 그리드 아이템의 최종 너비는 그리드 컨테이너의 너비와 그리드 갭(gap)에도 영향을 받을 수 있는데 만약 그리드 컨테이너의 너비가 아이템들의 합보다 크다면, grid-template-columns에 설정된 너비보다 아이템들이 더 크게 표시될 수 있습니다.

<div className="mx-auto box-border max-w-[1720px] px-4 md:px-10">
  <div className="mx-auto w-fit grid grid-cols-1 gap-y-10 md:grid-cols-2 md:gap-x-6">
    {mocks.map(mock => (
      <div className="w-[250px] h-[250px]">
    ))}
  </div>
</div>

• w-fit: 이 부분을 추가함으로써 해결 했다. width: fit-content를 그리드 컨테이너에 적용하면, 그리드 컨테이너는 내부 컨텐츠의 크기에 맞춰서 가로 너비가 조정된다. fit-content 속성은 컨테이너가 자식 요소들의 크기를 기준으로 최적의 크기를 계산하게 만든다

원래는 윗단의 div(max-w-[1720px])가 있는 곳에 w-fit을 부여하려고 했지만, 여기는 Cotainer역할을 하는 태그로써 내부의 요소들에게 틀을 부여하는 것까지는 좋지만 w-fit의 영향으로 내부의 요소에 따라 틀(Container)이 바뀔 수 있기 때문에 이렇게 되면 Cotainer역할을 벗어난다고 판단하고 내부에서 처리하도록 했다. 

 

2. flex container의 자식 요소에 고정의 너비를 부여한다. 그리고 자식의 수가 늘어나도 고정의 너비는 유지하면서 컨테이너에서 벗어난 부분에 대해서는 스크롤을 만드는 방법

우선 자식의 수가 늘어나서 최대의 너비보다 커질 때 flex 컨테이너는 자식의 크기를 줄인다. 이건 flex의 기본동작이므로 어쩔 수 없다. 하지만 자식의 수가 늘어나면서 내가 자식요소에 지정한 너비를 유지하면서 벗어나는 부분은 스크롤을 만들수 없을까? 하면서 삽질한 결과

<div className="overflow-x-scroll">
  <div className="inline-flex flex-col gap-x-6 gap-y-4 md:flex-row">
    {mocks.map(mock => {
      return <div className="w-[200px] h-[100px]" />;
    })}
  </div>
</div>

• overflow-x-scroll: 외부 div에 overflow-x-scroll 클래스를 추가하여, 가로 방향으로 스크롤이 가능하도록 한다. 이는 자식 요소들이 너비를 초과할 경우 스크롤바가 생성되어 자식 요소들이 축소되지 않도록 한다.
• inline-flex: inline-flex는 flex 요소를 인라인 블록으로 처리한다. 이것은 flex 요소가 자신의 컨텐츠의 너비에 맞춰서 라인 내에 배치되도록 만듭니다. 여기서 중요한 점은 inline-flex 컨테이너가 자식 요소들을 한 줄로 나열하면서도, 각 자식 요소의 고정 너비를 존중한다는 것이다. 즉, 자식 요소들은 줄어들기보다는 inline-flex 컨테이너의 너비를 넘어서면 그대로 스크롤을 생성한다.

결론적으로, inline-flex와 overflow-x-scroll의 조합이 자식 요소들이 고정 너비를 유지하면서도, 사용자가 수평 스크롤을 통해 모든 요소를 볼 수 있게 해주는 해결책이 되었다.

주의해야 할 점은 inline-flex는 말 그대로 inline적인 요소처럼 작용하게 된다. 즉 block처럼 자신의 너비를 부모한테 부여 받은 100%를 알아서 잡아먹지 않고 고정값을 부여해줘야 너비를 가질 수 있게된다는 것

 

Flexbox

Flexbox는 주로 일차원 레이아웃에 적합하다. 즉, 행이나 열 하나를 다룰 때 유용

 

Flexbox를 사용하는 이상적인 경우

• 요소들이 한 방향(수평 또는 수직)으로만 배열되는 경우
• 요소들 간의 간격을 유연하게 조정하고 싶을 때
• 요소들을 중앙에 배치하거나 공간을 균등하게 분배하고 싶을 때
• 컨테이너 내부의 요소 크기가 다양할 때 유연한 정렬이 필요할 때

Grid

Grid는 이차원 레이아웃을 위한 것으로, 행과 열을 모두 다룰 수 있다.

 

Grid를 사용하는 이상적인 경우

• 요소들을 행과 열로 구성된 그리드에 배치하고 싶을 때.
• 복잡한 레이아웃을 구성하고자 할 때(예: 사진 갤러리, 뉴스 사이트의 기사 레이아웃).
• 행과 열이 명확하게 정의된 레이아웃이 필요할 때.
• 요소의 크기를 정확하게 조정하고, 엄격한 정렬을 유지하고 싶을 때.