[css] flex, gap을 이용한 박스 리스트 grid 만들기

가끔,

이런 경우가 있습니다.

 

보통의 퍼블리셔는 디자인 시안 그대로를 퍼블합니다.

이는 잘못된게 아니고 자신의 일을 잘하는것입니다.

개발을 고려한 퍼블리싱을 하는 사람은 은근히 드물기 때문인것 같습니다.

하지만 개발이 들어갈 경우 css를 수정해야할 경우가 많이 발생하게 됩니다.

 

그 예로,

 

한줄에 3개의 아이템이 들어가는 형태를 퍼블리싱 했을때

flex를 이용하여 justify-content를 sapce-between으로 코딩했다면

2개의 아이템이 있을때는 말 그대로 양쪽으로 분산된다.

1개 혹은 2개 혹은 4개.. 즉, 3n+m개의 아이템이 있을 경우는 대비하지 않은 것입니다.

실제 작동할 때는 항상 아이템이 3개만 표시되라는 법은 없기도 하구요.

 

이러한 경우를 고치기 위해서 아래 방법을 사용해보는것은 어떨까요?

 

<ul class="list">
	<li class="item">아이템1</li>
    <li class="item">아이템2</li>
    <li class="item">아이템3</li>
    <li class="item">아이템4</li>
</ul>

<style>
  .list {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 20px;
  }

  .item {
      width: calc(((100% / 3) - 20px) + (20px / 3));
  }
</style>