[ CSS ] Grid 간단하게 설정하기

 

아래 글에서 소개했던 방법 중

grid 사용하기 위한 설정 1,2를 하고  

HTML 요소들 원하는 grid 위치에 삽입하기 - 1 의 방법을 채택하면 써야할 코드가 생각보다 많아진다.

2번과 4번 방법 또한 라인을 생각하면서 코드를 짜야하기에 실수를 하는 일이 많아지는데

이를 해결하기위한 방법을 소개해볼까한다.

 

[ CSS ] Grid 사용하기 , element 위치설정법

 

 

grid-template을 사용해 grid 사용을 위한 설정시 html 요소들을 함께 grid에 위치 시키는 방식으로

HTML 요소들 원하는 grid 위치에 삽입하기 - 1와 grid 사용하기 위한 설정 1,2를 한번에 처리 시켰다고 생각하면 된다.

 

 grid-template:
          "영역명 영역명 영역명 영역명" 행크기
          "영역명 영역명 영역명 영역명" 행크기
          "영역명 영역명 영역명 영역명" 행크기 / 칼럼 크기;
          
// 칼럼의 크기는 총 4개가 필요 -> 한 행에 4개의 영역이 들어가기때문

 

위 사이트의 만든 그리드를 이 방법을 사용해 코드를 작성한다면 왼쪽과 같은 코드가 나온다.

두 코드를 비교해본다면 왼쪽 코드가 더 간결하고 보기편하다.

 

 

 

주의해야할 점이라면

grid-template에서는 열 크기를 설정 시 repeat()를 사용하지 못한다.

그렇기에 해당 칼럼의 크기를 하나씩 설정해줘야한다.