Flex와 Grid에 대한 비교: 레이아웃 설계의 두 얼굴

인간은 망각의 동물이다. 특정한 행동이나 생각을 자주 하지 않으면 우리 뇌 속에서는 신경의 가지치기 현상이 일어난다고 한다. 우리가 어떤 생각, 기분, 행동을 수행하지 않으면 뇌는 그와 연관된 뉴런들을 발화시키지 않는데, 그 결과 그러한 생각, 기분, 행동이 점점 약해지다가 결국 시들어버리고 잊게 되는 것을 신경 가지치기라고 한다. 그렇기 때문에 우리는 초등학교 시절처럼 리코더를 연주할 수 없는거고, 곡면의 부피를 구하는 적분 공식이나 근의 공식등에 대해 더는 기억하지 못하는 것이다. 쉽건, 어렵건 지금 나는 무조건 많이 생각하고 자꾸 써보고 사용해보는 것 밖에 방도가 없다 생각한다.

 

 

웹 개발에서 레이아웃 설계는 핵심적인 부분이라 생각한다. Flex와 Grid는 각각 강력한 레이아웃 시스템으로, 어떤 상황에서 어떻게 사용되어야 하는지에 대한 이해는 웹 프론트엔드 개발자에게 특히나 중요하다고 생각한다. Flex와 Grid를 비교하여 어떤 상황에서 어떤 것을 선택해야 하는지에 대해 알아보았다.

 

 

 

1. Flex: 유연한 레이아웃 설계

Flex는 주로 한 축(행 또는 열)을 기준으로 요소들을 정렬하고 분배하는 데 사용된다. 주로 다양한 크기의 아이템들을 가로 또는 세로로 정렬할 때 유용하다.

 

.container {
  display: flex;
  justify-content: space-between; /* 아이템을 컨테이너 양 끝에 분배 */
  align-items: center; /* 아이템을 세로 가운데 정렬 */
}

.item {
  flex: 1; /* 남은 공간을 모든 아이템에 균등하게 분배 */
}

 

적합한 상황:

동적 크기의 아이템을 가로 또는 세로로 배치해야 할 때.
요소 간 간격을 균등하게 분배하거나, 양 끝에 정렬해야 할 때.

 

 

 

2. Grid: 그리드 기반의 정적 레이아웃 설계

 

Grid는 행과 열을 사용하여 아이템을 정렬하는데, 복잡한 레이아웃을 만들 때 효과적인데, 그리드를 사용하면 아이템의 위치를 정확하게 지정할 수 있다.

 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3개의 열을 가진 그리드 */
  grid-gap: 10px; /* 그리드 아이템 간 간격 */
}

.item {
  grid-column: span 2; /* 2개의 열에 걸쳐서 표시 */
}

 

 

적합한 상황:

복잡한 레이아웃을 설계해야 할 때.
특정 열 또는 행에 아이템을 배치해야 할 때.

 

 

 

결론:
Flex와 Grid는 각각의 특성에 따라 다양한 레이아웃 설계에 모두 적합하다. Flex는 유연하고 동적인 레이아웃에 강점을 보이며, Grid는 그리드 기반의 정적인 레이아웃에 강점을 보이기 때문에 상황에 따라 적절한 속성을 선택하여 웹 페이지의 레이아웃을 효과적으로 디자인할 수 있다.