(CSS) grid 1탄 : grid 만들기, grid-template, gap

 

 

css에서 가장 중요한 개념을 꼽으라고 하면 flex와 grid일 것이다.

 

이전에 flex에 대해 포스팅으로 다루었으므로 이번에는 grid를 다뤄보려고 한다.

 

flex에는 main-axis, cross-axis 등등 헷갈리는 개념이 많고, 자유롭게 레이아웃을 설정하는 게 어렵지만,

 

grid를 사용하면, 좀 더 쉽고 자유롭게 레이아웃을 설정할 수 있다. 

 

 

 

grid 기본 사용법

grid는 표와 비슷하게 columns(행), rows(열)로 구성된다.

 

• display : grid;
  • 해당 레이아웃을 grid로 설정한다. 레이아웃의 자식들은 grid-item이 된다.
• grid-template-columns: 200px 100px 100px; 
  • 해당 레이아웃의 열(column)이 몇 개이고 각각 크기가 얼마인지 설정한다. 
• grid-template-rows: 100px 50px;
  • 해당 레이아웃의 행(row)이 몇 개이고 각각 크기가 얼마인지 설정한다.
• row-gap: 25px;
  • 해당 gird의 행(row) 사이의 갭을 설정한다.
• column-gap: 10px;
  • 해당 gird의 열(column) 사이의 갭을 설정한다.

 

See the Pen grid by 김다영 (@xnpzlttb-the-solid) on CodePen.