Bootstrap grid system

웹 - 4개, 태블릿 - 2개씩 2줄, 모바일 - 1개씩 4줄

<div class="container">
  <div class="row g-3">
    <div class="col-lg-3 col-md-6 col-sm-12">
      Column1
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12">
      Column2
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12">
      Column3
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12">
      Column4
    </div>
  </div>
</div>

<div class="container">
    <div class="row row-cols-lg-4 row-cols-md-2 row-cols-sm-1 row-cols-1 g-3">
        <div class="col">
        Column1
        </div>
        <div class="col">
        Column2
        </div>
        <div class="col">
        Column3
        </div>
        <div class="col">
        Column4
        </div>
    </div>
</div>

한 row에 각 col이 몇칸을 차지하는지를 설정할 수도 있고 한 row에 col이 몇개가 들어가는지를 설정해서 반응형을 만들 수 있습니다.