Grid정리

grid는 container안에 있다.

<style>
 .grid-container {
   display: grid; or inline-grid;
   grid-template-columns: auto auto auto;
   //grid-gap: 50px 50px; 컬럼사이 간격
   //grid-column-gap:
   //grid-row-gap:

</style>

}
.grid
<div class="grid-container">
 <div class="grid-item">1</di>
 <div class="grid-item">2</di>
 <div class="grid-item">3</di>
 <div class="grid-item">4</di>
 <div class="grid-item">5</di>
 <div class="grid-item">6</di>
 <div class="grid-item">7</di>
 <div class="grid-item">8</di>
 <div class="grid-item">9</di>
</div>

gird를 합칠 떄

.item1{
grid-row-start: 1;
grid-row-end: 3;

}

더 쉽게 합치는 법

.item1 {
 grid-colum: 1/5;
}
.item1 {
 grid-colum: 1/ span 3; //colum line이 아닌 3개의 item까지 합친다는 말
}
.item8 {
 grid-area: 1 / 2 / 5 / 6; //row 시작점 / column 시작점 / row 마치는 점 / column 마치는 점
}

grid-template-columns: auto auto auto auto; //4개의 컬럼이 있으므로
grid-template-columns: 80px 200px auto 30px; //3번째 grid만 responsive하게 변함

justify-content: space-evenly; //창이 변할 떄 가로 gap사기 공간을 일정하게 유지하게 하는 것
justify-content: space-around; //창이 변할 떄 가로 column사이 공간만 일정하게 유지, 양끝은 변하지 않음
align-content: space-around; //창이 변할 떄 세로 column사이 공간만 일정하게 유지, 양끝은 변하지 않음
align-content: space-around; //창이 변할 떄 세로 column사이 공간만 일정하게 유지, 양끝은 변하지 않음

justify-content: start; //가로로 아이템들을 앞으로 모움
justify-content: center; //가로로 아이템들을 가운대로 모움
justify-content: end; //가로로 아이템들을 끝으로 모움
align-content: start; //세로로 아이템들을 앞으로 모음
align-content: center; //세로로 아이템들을 가운데로 모음
align-content: end; //세로로 아이템들을 끝으로 모음

---