[Modern CSS] 동일한 높이 만들기 Flex vs Grid

modern css 2탄!

flex 와 grid와 각각 동일한 높이 만들기를 해보도록 하겠습니다.

 

FLEX

.flexbox {
  display: flex;

  // 높이를 가득 채우기
  .element {
    height: 100%;
  }
}

GRID

.grid {
  display: grid;
  // 기본축을 세로로 변경
  grid-auto-flow: column;
  
  // 높이를 가득 채우기
  .element {
    height: 100%;
  }
}

flexbox와 유사하게 직계 자식은 높이가 같지만 자식은 flexbox 솔루션에서와 같이 높이 정의를 추가해야합니다.

 

어떤 방법이 더 나을까요?

순전히 동일한 높이 요소를 해결하기 위해 flexbox의 장점은 기본 축이 즉시 나란히 열을 활성화하는 반면 그리드는 명시적으로 설정해야한다는 것입니다.

그러나 요소는 본질적으로 동일한 너비가 아닙니다 (예 : 탐색 링크와 같은 콘텐츠 유형에 따라 이점이 될 수 있음).

그리드의 장점은 필요한 경우 본질적으로 동일한 너비 요소입니다.

그에 추가되는 이점은 자동 흐름을 원하지 않고 대신 "행"당 최대 "열"수를 정의하려는 경우입니다.

이 경우 그리드 레이아웃은 열 수를 제한하기 위해 계산을 정의해야하는 flexbox 솔루션과 비교하여 열을 분산하는 수학을 쉽게 처리합니다.

아래 결과물인 3열 결과를 보면 그리드가 훨씬 간단하게 수행한 것을 볼 수 있습니다.

$col_gap: 1rem;

/* grid 경우 */
&.col-3 {
  grid-gap: $col_gap;
  grid-template-columns: repeat(3, 1fr);
}

/* flex의 경우 */
.flexbox.col-3 {
  // 넘치는 flex 아이템들이 떨어지도록 wrap을 설정해야 합니다.
  flex-wrap: wrap;

  .column {
    // gap을 임의로 계산하여 지정합니다.
    margin: $col_gap/2;
    // width를 margin을 제외하여 각각 지정합니다.
    max-width: calc((100% / 3) - #{$col_gap});
  }
}

반응형도 고려해야할 것이고 앞으로 어떤 레이아웃이 어떤 상황에서 적용 되어야 할지 잘 고민해서 적용해야 될 것 같습니다.

 

 

 

출처 : moderncss.dev/equal-height-elements-flexbox-vs-grid/