CSS grid 간략 공부

개인적으로 지금까지 실무에서는 grid는 1도 사용하지 않고 있었다.

 

그 이유는 역시 익스플로러였...ㅋ 

 

 

 

그러나 caniuse.com에서 살펴보니 ie를 제외하고는

 

거의 대부분의 브라우저에서 grid 사용이 가능하기 때문에

 

실무에서도 적극적으로 사용해보려고 한다.

 

caniuse에서 알아본 마성의 IE

 

 

 코드

이제 아래 코드 예제로 간략히 알아본다.

/* HTML */
<div class="wrap">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    ...
</div>

/* css */
<style>
    .wrap{
        /* 그리드 속성 설정 */
        display: grid;
    
        /* .item 비율 설정 */
        grid-template-columns: 1fr 1fr 1fr;
    
        /* .item 비율 설정은 아래와 같이 repeat으로 사용할 수 있다. */
        grid-template-columns: repeat(3, 1fr);
    
        /* .item 사이의 간격 설정 */
        grid-gap: 10px;
    
        /* .item의 최소 및 최대 높이값 */
        grid-auto-rows: minmax(100px, auto);
    }
    .item:nth-child(1){
        /* .item1의 가로값 설정 */
        grid-column: 1/4;
    
        /* .item1의 세로값 설정 */
        grid-row: 2/4;
    }
</style>

 

위에서 조금 이해가 어려운 부분은 .item에 준 grid-column과 grid-row 속성값.

 

1/4, 2/4와 같이 수학의 분수처럼 표현된 부분은 calc와 같이 계산을 하는 것이 아니라

 

grid에서의 꼭짓점 좌표를 나타냄.

 

 

즉, 위와 같은 grid박스가 있다고 한 경우,

 

1/4는 꼭짓점 1번부터 4번까지, 2/4는 2번부터 4번까지를 뜻함.

 

 

 

 

 

끝~