✋ 이 글은 제가 CSS grid 레이아웃에 대해 배우고, 사용해보면서 정리한 글이오니, 내용이 다소 부족할 수 있습니다. 참고용으로만 봐주세요! 부족 및 잘못된 정보에 대한 피드백은 환영합니다.

display: grid

이전 글인 display: flex 보다 더욱 복잡한 레이아웃 구현이 가능하며 반응형 사이트를 만들 때도 보다 수월하게 할 수 있습니다. flex 처럼 grid도 IE에서 일부분 지원하기 때문에, 100% 까진 아니더라도 어느정도는 만들 수 있습니다.

사용법

flex와 마찬가지로, 부모 클래스에 display: grid 속성을 써주면 됩니다.

.parents{
	display:grid;
}

grid-template-columns & rows

column (열) 과 rows (행)의 크기를 지정합니다. grid 사용 시 왠만해선 사용되는 속성입니다.

코드

<div class="container">
    <div class="box">
      <span>box</span>
    </div>
    <div class="box red">
      <span>box</span>
    </div>
    <div class="box gr">
      <span>box</span>
    </div>
    <div class="box be">
      <span>box</span>
    </div>
</div>

.container{display: grid; grid-template-columns: 100px 100px 100px 100px; grid-template-rows: 100px 100px 100px 100px;}

결과

grid-template-rows 속성을 통해서 행 크기를 4번 부여했으므로, 4X4 레이아웃을 완성하였습니다. 만약에 컨테이너 안에 아이템이 6개라면 grid-template-columns : 100px 을 6번 써주시면 됩니다.

grid-tmplate-columns : 100px 100px 100px 100px 100px 100px

repeat()

열과 행 크기가 모두 같다면, 굳이 다 써줄 필요가 없습니다. repeat 을 사용하여 코드를 더욱 간결하게 할 수 있습니다.

before

.container{
  display:grid;
  grid-template-columns: 100px 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px 100px 100px;
}

after

.container{
  display:grid;
  grid-template-columns: repeat(5,100px);
  grid-template-rows: repeat(5,100px);
}

fr 단위

fr은 fraction의 줄임말로, 분수를 나타내는 단위입니다.

.container{
	grid-template-columns: repeat(4,1fr);
}

숫자 비율이 커질수록 그리드 행 또는 열 크기도 커지게됩니다. 브라우저 크기 혹은 컨테이너 크기 등이 달라져도 비율이 유동적으로 바뀌기때문에 반응형에서 특히 사용하기 편합니다.

column 4개 전부 1fr로 동일한 비율로 맞췄을 때의 결과입니다.

grid-template-columns: 1fr 1fr 3fr 1fr; 로 했을 때의 결과입니다.

grid-template-areas

각 그리드 영역에 이름을 정해서 레이아웃을 배치할 수 있습니다.
이름을 직접 정하기 때문에 어떤 영역인지 한눈에 알아볼 수 있다는 것이 장점이 되겠습니다!

display: grid 를 통해 간결해진 코드와 반응형까지 생각하는 레이아웃을 쉽게 만들 수 있게 되었습니다.

코드

 <div class="gridContainer">
     <header>header</header>
     <nav>nav</nav>
     <div class="sideA">sideA</div>
     <main>main</main>
     <div class="sideB">sideB</div>
     <footer>footer</footer>
</div>

.gridContainer{
display: grid; gap: 10px; grid-template-rows: 100px 50px 300px 100px;
grid-template-areas: "header header header" "nav nav nav" "sideA main sideB" "footer footer footer";}
.gridContainer :is(header,nav,.sideA,main,.sideB,footer){padding: 10px; box-sizing: border-box;}
.gridContainer header{grid-area: header; background-color: orange;}
.gridContainer nav{grid-area: nav; background-color: green;}
.gridContainer .sideA{grid-area: sideA; background-color: orangered;}
.gridContainer main{grid-area: main; background-color: skyblue;}
.gridContainer .sideB{grid-area: sideB;background-color: orangered;}
.gridContainer footer{grid-area: footer; background-color: blueviolet;}

css 코드에서 주의깊게 봐야할 곳은grid-template-areas , grid-area 입니다.
부모 클래스에서는 grid-template-areas 속성으로 할당해준 영역들의 이름을 써주고, 자식 클래스에는 grid-area 속성으로 영역들의 이름을 정해줍니다.

이 때, grid-area 의 이름은 짓고싶은 이름으로 지으시면 되지만 반드시 grid-template-areas 속성과 이름이 같아야합니다. 또한, grid-area 속성에는 따옴표 ("") 를 쓰지 않습니다.

ex)

/* O */
.gridContainer{grid-template-areas: "hd hd hd" "nv nv nv" "a main b" "ft ft ft";}
.gridContainer header{grid-area: hd;}
.gridContainer nav{grid-area: nv;}
.gridContainer .sideA{grid-area: a;}
.gridContainer main{grid-area: main;}
.gridContainer .sideB{grid-area: b;}
.gridContainer footer{grid-area: ft;}


/* X */
.gridContainer{grid-template-areas: "hd hd hd" "nv nv nv" "a main b" "ft ft ft";}
.gridContainer header{grid-area: head;}
.gridContainer nav{grid-area: navi;}
.gridContainer .sideA{grid-area: sidebarA;}
.gridContainer main{grid-area: mainArea;}
.gridContainer .sideB{grid-area: sidebarB;}
.gridContainer footer{grid-area: footerArea;}

+ 그리드 영역에 공백 주기

 .gridContainer{display: grid; gap: 10px; grid-template-rows: 100px 50px 300px 50px 100px; 
 grid-template-areas: "header . ." "nav nav ." "sideA main sideB" ". . ." "footer footer footer";}

공백은 마침표 혹은 none 으로 구분합니다.

결과

공백만 있는 row (행) 을 추가하면서 grid-template-rows 속성에도 공백 행 값 (50px) 을 주었습니다.

minmax()

css의 min-width & height , max-width & height 속성의 개념을 알고계신다면, 그리드에서의 minmax() 함수도 똑같이 생각하시면 됩니다.

.gridContainer{
display: grid; gap: 10px; grid-template-rows: minmax(100px,auto) 50px 300px minmax(100px,auto);
grid-template-areas: "header header header" "nav nav nav" "sideA main sideB" "footer footer footer";}

최소값 100px , 최대값 auto로 설정해두었기 때문에 내용이 부족하든 말든 일단 최소 100px 부터 시작하여 내용이 많아져서 100px을 초과할경우 너비를 자동으로 늘어나게 한다 라는 뜻입니다.

auto-fill & auto-fit

auto-fill 과 auto-fit 속성은 그리드 영역을 꽉 채우는 속성입니다. repeat() 함수에서만 사용가능하며, 주로 mixmax() 함수와도 사용됩니다.

auto-fill

 <div class="gridItemContainer fill">
    <div class="gridItems">Item01</div>
    <div class="gridItems">Item02</div>
    <div class="gridItems">Item03</div>
    <div class="gridItems">Item04</div>
 </div>

.gridItemContainer{display: grid; grid-auto-rows: 100px; gap: 10px; padding: 10px; box-sizing: border-box; margin-top: 20px; background-color:#444;}
.gridItemContainer.fill{grid-template-columns: repeat(auto-fill, minmax(100px,1fr));}

auto-fill 속성은 최소값인 100px의 크기로 그리드 컨테이너를 가상 공간을 사용해서라도 꽉 채웁니다.
그리드 영역 안에 아이템이 몇개가 들어갈 지 예상이 안될 때 주로 사용합니다.

auto-fit

<div class="gridItemContainer fit">
    <div class="gridItems">Item01</div>
    <div class="gridItems">Item02</div>
    <div class="gridItems">Item03</div>
    <div class="gridItems">Item04</div>
</div>

.gridItemContainer{display: grid; grid-auto-rows: 100px; gap: 10px; padding: 10px; box-sizing: border-box; margin-top: 20px; background-color:#444;}
.gridItemContainer.fit{grid-template-columns: repeat(auto-fit, minmax(100px,1fr));}

auto-fit 속성은 아이템의 크기를 늘려서 그리드 영역을 빈 공간 없이 꽉 채웁니다.

grid-auto-columns & grid-auto-rows

자동으로 열과 행의 크기를 채워주는 속성입니다.

grid-template-columns & grid-template-rows 속성과 minmax() 함수의 개념들을 이해했다면 이 속성 또한 이해가 금방 되실겁니다!

.container{
  display:grid;
  grid-template-columns: repeat(5,100px);
  grid-template-rows: repeat(5,100px);
}

grid-template-columns 속성을 사용할 때에는 위 코드처럼 행이나 열의 개수를 알고있는 상태에서 각각 크기를 정해줬지만, 열이나 행이 몇개가 될지 모르는 상황에서는 grid-auto-columns 속성을 사용하면 됩니다.

.gridContainer{
  display: grid; gap: 10px;
  grid-auto-rows: minmax(100px,auto);
  grid-template-areas: "header header header" "nav nav nav" "sideA main sideB" "footer footer footer";
}

행의 개수가 몇개인지 모르기때문에 일단 행을 최소 100px , 최대 auto 크기로 설정합니다.

모든 행에 minmax(100px,auto) 가 적용되었습니다.

gap , order

display: grid 에서의 gap , order 속성은 display: flex 처럼 동일하게 작동합니다.
flex에 대한 내용은 flex Layout 포스팅을 참고해주세요!

IE 지원

display: flex 처럼 display: grid도 IE에서 사용할 수 있습니다.
단지, 좀 쓰기 까다로울뿐...

Autoprefixer 사이트에서 CSS 속성을 구버전 브라우저 혹은 IE에 맞게 변환시켜주는 사이트 (플러그인) 입니다. grid 뿐만 아니라 flex , transition , animation 등 여러가지 변환이 됩니다.