[ CSS ] Grid border 만들기

 

grid를 사용하다 보면 아래처럼 element를 감싸는 선이나 element 간의 간격을 두고 싶을 때가 있다.

 

 

 

이때 우리는 흔히 아래 코드의 7~8번째 라인처럼

자식 element(main속 div들) 자체에 border를 주면 되지 않을까?라는 생각을 하게 된다.

 

html / css

 

 

하지만 위와 같은 코드 결과는 아래의 사진처럼

header와 column, column과 nav 등의 사이에 border가 겹쳐 border의 두께가 달라진다.

 

 

 

물론 각 element의 border 두께를 다르게 주면되겠지만

그러면 설정해야 하는 border 두께 양이 너무 많아진다!!!!

( 이런 귀찮은 상황이 매우 싫은 편... )

 

이럴 경우에는 gap과 padding을 사용하면 된다.

gap은 행과 열 사이의 간격을 설정하는 속성으로 display이 grid인쪽에 함께 작성해 주면 된다.

padding을 gap과 같은 크기로 설정하는 이유는 gap은 행과 열 사이에 간격만을 설정하기에

행과 열 사이가 아닌 테두리 부분은 설정이 되지 않기 때문이다.

 

또한 border 속성을 이용해 설정하지 않기에 색상 변경은 어떻게 해야 하는지 모를 수 있는데

간격의 색상은 display가 grid인 쪽의 background이랑 일치하기에 background의 색상을 바꿔주면 된다. ( 4번 라인 )

 

또한 gap를 행과 열에 다르게 주고 싶을 땐 아래와 같이 설정하면 된다.

colum-gap : column간의 공백의 크기를 지정한다.
row-gap: row간의 공백의 크기를 지정한다.

 

아주 간단하지만 생각 안 날 때가 가끔 있어서 정리해 보았다 🤣