bootstrap / 그리드(grid)

부트스트랩에서 그리드는 디스플레이의 크기에 따라서 레이아웃을 변경할 수 있는 역할을 할 수 있다.
그리드(grid)의 옵션에는 6개가 있고 컨테이너의 min-width를 기준으로 변경되는 방식이다.
그러기 때문에 grid를 사용하기 위해서는 "container"가 필수적으로 필요하다.

https://getbootstrap.com/docs/5.0/layout/grid/

 

---

---

큰 화면에서의 레이아웃

 

작은 화면에서의 레이아웃

 

그리드는 부트스트랩 홈페이지에서 알려주듯 <div class="container"> 안에 "row", row안에 "col" 이 위치하게 된다.

---

예시

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
    //<% for(EvReviewVo erv : reviewList){ %>
      <div class="col">
        //<div class="card shadow-sm" onclick="detailFn('<%=erv.getHidx()%>')" style='cursor:pointer;'>
          //<img class="bd-placeholder-img card-img-top stretched-link imgbox" width="100%" height="225" src="../Advice_img/<%=erv.getHimg()%>"></img>
          //<title class="fw-bold"><%=erv.gethName() %></title>
          //<div class="card-body">
            //<div class="justify-content-between align-items-center">
      	      //<p class="card-text hname"><%=erv.gethName() %></p>
            	//<small class="text-muted"><%=erv.getstartdate() %>~<%=erv.getendenddate() %></small>
            //</div>	
          //</div>
        //</div>
      </div>
    //<%}; %>
  </div>
</div>

위 코드는 아래와 같은 사진의 페이지를 불러온다. (불필요한 부분은 주석처리 했습니다.)

큰 화면에서의 레이아웃

개인적으로 위 코드에서 핵심은 이 부분이라고 생각한다.

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

"row-cols-md-3" 는 md 사이즈의 diplay에서는 3개의 col을 한 row로 담고.

"row-cols-sm-2" 는 sm 사이즈 display에서 2개의 col이 하나의 row가 되는 것이다.

그보다 더 작은 diplay에서는 1개의 col 1개의 row안에 들어가게 된다.