퍼블리싱 배우기 시작한 지 두 달쯤 됐는데요, 레이아웃 잡을 때마다 flex 써야 하나 grid 써야 하나 매번 고민돼서 질문 남깁니다.
예를 들어 카드 3개 가로로 나란히 놓는 걸 만든다 치면, flex로도 되고 grid로도 되잖아요. 실제로 둘 다 해봤는데 결과가 똑같이 나오더라고요.
flex로 하면 이렇게 하고,
.wrap { display: flex; gap: 16px; }
grid로 하면 이렇게 했는데,
.wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
둘 다 카드 세 개 잘 나옵니다. 그래서 결국 뭘 기준으로 골라야 하는 건지 감이 안 잡혀요. 그냥 아무거나 손에 익은 거 쓰면 되는 건가요, 아니면 상황별로 확실히 구분되는 기준이 있는 건가요?
특히 반응형으로 화면 좁아지면 카드가 아래로 줄바꿈되게 하고 싶은데 그럴 땐 어느 쪽이 편한지도 궁금합니다. 고수분들은 그냥 딱 보면 아 이건 flex다 이건 grid다 이렇게 나오시는 건가요?