css로 글이나 상품 목록을 만들 때 display:flex를 자주 사용하는데, 역시 display:grid를 사용해야 하는 걸까? 라는 생각에 잠깐 사용해 보았다.

개인적으로 display:flex에 익숙해져 있어서 display:grid는 굉장히苦手意識(불안감)이 있다.

간단한 목록이라면 문제가 없지만, 꽤 복잡한 레이아웃에도 대응할 수 있는 것 같고, 반대로 매번 ‘어라? 어떻게 짜는 거지? 라고 머릿속이 복잡해져 버리는 거죠(……);

그럼 바로 평소처럼 display:flex로 구성해 보겠습니다.

  <div class="list01">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
  </div>
  <style>
    .list01 {
      width: 900px;
      background: #ddd;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .list01 .item {
      margin-bottom: 25px;
      width: 32%;
      height: 100px;
      color: #fff;
      background: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
  </style>

브라우저에서 표시하면 이런 느낌입니다.

이제 이 코드의 css 부분을 display: grid로 변경해 보겠습니다.

  <div class="list01">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
  </div>
  <style>
    .list01 {
      width: 900px;
      background: #ddd;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2%;
    }
    .list01 .item {
      margin-bottom: 25px;
      height: 100px;
      color: #fff;
      background: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
  </style>

브라우저에서 표시하면 다음과 같습니다.

gird의 뭐가 싫은지 grid-template-columns가 싫다(…). ;

repeat(3, 1fr)를 지정하고 있기 때문에 3개가 1fr의 폭으로 늘어선 것처럼 지정되어 있다. ………………………..

Tweet