css grid

grid는 표태그인 table과 비슷해보이지만 그보다 자유도가 큰 속성이다. 그래서 레이아웃을 만들때 grid도 자주 쓰인다고 한다.이 grid에 대해 정리해보자.

grid 는 column과 row로 이루어져 있다.
column : 세로줄 (열)
row : 가로줄 (행)

grid 쓰는법

1) grid 속성

grid도 flex와 비슷하게 container를 만들어 자식요소들을 넣어줘야 한다.

 <div class="container1">
    <div class="box1"><h2>1</h2></div>
    <div class="box2"><h2>2</h2></div>
    <div class="box3"><h2>3</h2></div>
</div>

그리고 부모의 css에 다음과 같이 grid속성을 넣어주자

<style>
.container{display : grid}
</style>

2) grid 형태 제작하기

그 다음 grid의 전체 형태를 만들어야 한다.
grid는 열과 행으로 이루어져 있으므로, 몇 열, 몇 행으로 제작할 건지 적어주는 것이다.

grid-template-columns :
열의 개수를 몇개로 할 것인가? 가로로 몇 칸?
.
grid-template-rows :
행의 개수를 몇개로 할 것인가? 세로로 몇 칸?

이때는 px값이 아닌 fr(fraction)을 쓴다.
예를 들어 가로3칸, 세로 2칸의 총 6칸짜리 grid를 만들고 싶다면

<style>
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:1fr 1fr

라고 적어주면 된다.이때 fr은 상대적인 비율로 어떤 칸을 다른 칸들보다 2배더 키우고 싶다면 2fr라고 적어주면 된다.

3) grid 병합해 모양 만들기(세부화)

이제 그리드의 전반적인 틀을 만들었으니 그리드를 병합해 내가 진짜 원하는 모양을 만들어줄 차례다. 이를 grid 병합 속성이라고 하는데, 이는 그리드의 항목(items)에다가 주는 속성이다.

grid-column-start : 칼럼시작 라인 번호
grid-column-end : 칼럼 끝 라인 번호
grid-column :칼럼의 단축키 속성(시작,끝)

grid-row-start : 행시작 라인 번호
grid-row-end : 행 끝 라인 번호
grid-row : 행의 단축키 속성(시작,끝)

예를 들어 container라는 부모요소안에 box1,2,3를 넣는다고 해보자.

<style>
    .container{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
    .container1 .box1{
        grid-column:1/4;
    }
</style>

이렇게 css를 넣으면 box1은 9칸중에서 첫번째 줄의 3칸을 모두 차지하게 된다. grid-column을 지정하면 가로로 차지하고, grid-row를 지정하면 세로로 차지하는 영역을 지정할 수 있다.
이 때필요한 열/행 정보는 f12를 누르고(개발자 모드) grid를 지정한 요소를 찾아 grid 버튼을 클릭하면 상세하게 나온다.

참고) 영역이름 지정해서 grid에 넣기

위처럼 item마다 하나씩 grid-column:1/4;처럼 구역을 지정하는 것은 좀 불편할 수 있다. 이때 더 직관적이고 편한 방법이 있다.
우선 다음과 같이 item들에 grid-area를 활용해 이름을 붙여주자.

grid-area : '구역 이름'

        <style>
        .container2 .box1{
            grid-area:a;
        }
        .container2 .box2{
            grid-area:b;
        }
        .container2 .box3{
            grid-area:c;
		}
        </style>

그 다음 다시 container로 올라가 grid-template-areas 속성을 추가해준다.

      <style> 
       .container{
            display:grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas: 
            "a a b"
            "c c c"
            ". . ."
        }
      </style>

이러면 3*3의 칸에 내가 원하는 요소를 쉽게 배치할 수 있다.
참고로 . 은 비어있는 칸을 지정한 것이다.