[BFE.dev] 2단 레이아웃

2단 레이아웃

왼쪽 열은 25%를 차지하고(최소 100px), 오른쪽 열은 그 나머지를 채우는 2단 레이아웃을 구현하세요.

1.400x300

2.600x300

3.300x300

정답 1 ( grid 활용 ver. )

.container {
  height: 300px;
  display: grid;
  /* 왼쪽은 100px과 25% 중 큰 값을 선택하고, 오른쪽은 남은 공간(1fr)을 차지함 */
  grid-template-columns: minmax(100px, 25%) 1fr;
}

.left {
  background-color: #f44336;
}

.right {
  background-color: #2973af;
}

정답 2 ( flex 활용 ver. )

.container {
  height: 300px;
  display: flex; 
}

.left {
  background-color: #f44336;
  /* flex: [grow] [shrink] [basis] */
  flex: 0 0 25%; 
  min-width: 100px; /* 최소 너비 100px 보장 */
}

.right {
  background-color: #2973af;
  flex: 1; /* 남은 공간을 모두 차지하도록 설정 (flex-grow: 1) */
}