[CSS/jQuery] 크기가 다른 Grid item 자동 정렬 하기

 

 

Grid 기본코드

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid div {
  grid-column-end: span 1;
  grid-row-end: span 1;
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
</style>


<div class="grid">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
</div>

 

 

 

특정 칸만 크기 조절

특정 박스만 크기를 다르게 하고 싶다면  grid-column-end (행 크기 조절),  grid-row-end (열 크기 조절) 를 이용해 조절하면 된다. 아래의 경우에는 big class를 가진 박스는 가로 3칸중 2칸, 세로로도 2칸씩 차지하도록 하였다.

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid div {
  grid-column-end: span 1;
  grid-row-end: span 1;
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.grid div.big { //큰박스
  grid-column-end: span 2;
  grid-row-end: span 2;
}
</style>

<div class="grid">
    <div class="item big">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item big">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
</div>

 

 

 

 

 

 

그런데 특정 박스만 크게 하는 경우에, 상황에 따라 여백이 생기는 경우가 있다.

아래 경우에는 Grid를 3칸으로 하였는데, 3n번째 크기를 다르게 하면 바로 윗줄에 여백이 생긴다. (Item 2 옆 공백)

 

 

 

해결방법 1. CSS로 조정하기

 

여백없이 알아서 채워지도록 하려면 큰박스 다음에 나오는 div를 조정하도록 하면 되는데, 박스 갯수가 몇개나 될지 모르고 하나하나 설정해주는게 여간 번거로운 일이 아니다.

.grid div:nth-child(3).big + div {grid-row: 1;grid-column: 3;}
.grid div:nth-child(6).big + div {grid-row: 2;grid-column: 3;}
.grid div:nth-child(9).big + div {grid-row: 3; grid-column: 3;}

 

 

 

 

해결방법 2. jQuery로 조정하기

박스가 많거나 css로 일일히 조정하기 어려운 경우, 아래처럼 3n번째 다음에 나오는 박스(Item 7)는 자동으로 3n번째 앞에 3번째 칸에 위치하도록 jQuery로 강제로 조정해준다.

$('.grid > div:nth-child(3n)').each(function () {
if($(this).hasClass("big") === true) {        

    var num = $(this).index(); //index
    var num2 = parseInt(num/3) + 1;

    $(this).next("div").css("grid-row", num2);        
    $(this).next("div").css("grid-column", "3");   
    $(this).next("div").css("background", "yellow");        
  } 
});

 

 

그러면 아래처럼 여백 없이 딱 맞게 조정이 된다.