css grid 세상에서 가장 쉽게 이해하기

 css grid는 css로 layout을 만들 때 가장 편리하고 유용한 방법입니다. grid는 행과 열을 동시에 다룰 수 있기 때문에, grid를 사용하면 grid layout 그 자체뿐만 아니라 grid내부의 요소(각 칸)들도 함께 컨트롤할 수 있습니다. 각 속성들에 따라 다르기도 하지만 grid속성 자체를 사용할 수 있는 브라우저가 점점 더 많아지고 있기에 grid 기능을 익히는 것은 매우 유용합니다.

---

CSS Grid 기초

1. 두가지 핵심 요소 : grid-container / grid-item

grid-container : 선, item이 모인 하나의 grid |  item : 선 안의 내용/ 각각의 칸

 css grid는 table(표)와 비슷합니다. container은 '선'을 의미합니다. item은 각각의 '칸'이라고 생각하시면 됩니다.

 일반적으로 우리는 table을 생각하면 행과 열이 먼저 떠오를 것입니다. 이번에는 행 과열은 잠시 뒤로 미뤄두고 grid의 line(선)'에 집중해 보겠습니다. 

 

wrapper안의 div인 item을 grid로 바꾸기 위해서는 다음과 같이 작성하면 됩니다.

. wrapper {
     display: grid;
}

 

 

아직 display속성만 적용했기 때문에, 기본적으로 <div> 속성이 적용되어 block으로 쌓이게 됩니다.

2. Columns(열) and Rows(행)

grid에 columns(열)과 rows(행)을 만들기 위해서는 grid-template-columns과 grid-template-rows 속성을 사용해야합니다.

● grid-template-columns 속성은 columns(열)의 개수와 길이를 나타내는 것입니다. 각 셀의 width(너비) 값으로 생각하시면 좀 더 이해하기 쉽습니다.

● grid-template-rows 속성은 rows(행)의 개수와 길이를 나타내는 것입니다. 각 셀의 height(높이) 값으로 생각하시면 좀 더 쉽습니다.

 추가로, repeat() 함수를 사용하여 더 간단하게 표현할 수도 있습니다. repeat() 함수에 대해서는 추후 포스팅에서 자세하게 다루겠습니다. ex) grid-template-columns : 100px 100px 100px; = grid-template-columns : repeat(3, 100px);

 

See the Pen mYzKbZ by kim jihae (@saea) on CodePen.

 

 grid-template-columns속성 값을 3개 작성하고 grid-template-rows속성 값을 2개 작성했으므로, 위와 같이 2X3의 grid가 만들어졌습니다. 

 반대로, grid-template-columns속성 값을 2개 작성하고 grid-template-rows속성 값을 3개 작성한다면 3X2의 grid가 만들어질 것입니다. 간단하지 않나요?!

2-1 grid area

 grid area는 grid-item의 크기와 위치를 지정하여 grid 배치를 하는 것입니다. 

 각 들의 위치와 크기를 조정하려면 원하는 item(칸)을 선택하고 grid-column-start(end) 또는 grid-row-start(end) 속성을 사용하면 됩니다. '첫 번째 칸은 layout에서 상단에 한 줄 전부를 차지했으면 좋겠다'라거나, '맨 우측 열전체를 차지했으면 좋겠다', '다섯 번째 칸(item)은 중간에 두배만큼 차지했으면 좋겠다'라는 것을 설정할 때 사용합니다.

 

 각 item(칸)들의 크기를 조정하기 위해서는 각 항목에 class-name을 정해줘야 선택하여 조정할 수 있습니다.

 

 여기서 주의할 사항이 있습니다. 칸 하나하나가 아닌 grid-line(선)을 중심으로 계산해야 합니다. 다음의 표를 보면 좀 더 쉽게 이해할 수 있습니다.

 

2-2 grid-column-start | grid-column-end | grid-row-start | grid-row-end

 그럼 이제 본격적으로 각 item들의 자리를 조정해 보겠습니다. grid-area를 어떻게 사용하고, grid-area의 속성과 속성값을 알아보겠습니다.

 

grid-area syntax

 

grid-area : grid-column-start / grid-column-end / grid-row-start / grid-row-end / item-name;

grid-area의 속성

• grid-column-start : 특정 item을 표시하기 시작할 열을 지정합니다.
• grid-column-end: 특정 item을 표시하기 끝마칠 열을 지정합니다.
• grid-row-start : 특정 item을 표시하기 시작할 행을 지정합니다.
• grid-row-end: 특정 item을 표시하기 끝마칠 행을 지정합니다.
• item-name : 특정 item이 표시될 grid-template-area의 name을 의미합니다. (추후 자세히 다룰 것입니다)

grid-column-start | grid-column-end | grid-row-start | grid-row-end의 속성 값은 다음과 같습니다. 

• auto : browser가 자동으로 지정합니다.
• line-number : column 또는 row의 특정 line-number을 사용하여 지정합니다.
• span+number : item(칸) 하나하나를 생각하시면 됩니다. 
• area-name : grid-template-area에서 지정한 area-name을 사용하여 지정합니다

<grid-column-start / grid-column-end / grid-row-start / grid-row-end을 사용한 예시>

 

  See the Pen https://codepen.io/saea/pen/dEQzrK/">
  dEQzrK by kim jihae (https://codepen.io/saea">@saea)
  on https://codepen.io">CodePen.

 

2-3 grid-column / grid-row

item의 자리를 조정하는 방법에는 grid-column-start / grid-column-end / grid-row-start / grid-row-end 이외에도 grid-column / grid-row가 있습니다. 이 방법은 코드의 길이도 줄어들고 좀 더 편리하게 코드를 작성할 수 있습니다.

 

<grid-column / grid-row를 사용한 예시>

 

  See the Pen https://codepen.io/saea/pen/mYQBRZ/">
  mYQBRZ by kim jihae (https://codepen.io/saea">@saea)
  on https://codepen.io">CodePen.

 

 

 css부분에서 'item4'부분이 주석처리되어있고 item1과 함께 묶여있습니다. 그럼에도 동일한 결과가 나왔습니다. 이렇듯 각각 다른 class naming을 하지 않아도 하나의 선택자로 동일한 스타일을 지정할 수 있음을 확인할 수 있습니다.

 

※ span다음에 띄어쓰기하지 않으면 오류가 생기니 꼭 띄어쓰기해야 합니다.

 

여기까지 css grid의 기본개념이었습니다.

 

추가 tip : 주석처리의 단축키는 Ctrl+/입니다 :)