TIL 21

1. grid
grid는 대부분 부모클래스에서 사용한다

grid 사용법은 flexbox와 비슷하다

display:grid 

grid에는 여러가지 방법을 통하여 정렬할 수 있다.

1. grid-template-columns: grid column을 정의 (열과 크기)

2. grid-template-rows: grid row를 정의 (행과 크기)

3. column-gap :colum간의 차이 (공간)

4. row-gap: row간의 차이(공간)

grid-template-columns: 250px 250px 250px;
grid-template-rows: 100px 50px 200px;
column-gap: 10px;
row-gap: 10px;

위와 같이 정의했을때 아래와 같이 표기된다.

위 화면을 보면 열의 크기는 250px로 동일하게 3칸을 만들고
행의 크기는 각각 100px 50px 200px로 각 블럭의 크기가 다른것을 볼 수 있다.
column , row -gap 을 이용하여 행과 열 사이에 공간을 만들어주었다.

column-gap: 10px;
row-gap: 10px;

굳이 이렇게 둘 다 작성할 필요 없이

gap: 10px

gap 하나만 사용하여 column과 row 동시에 gap을 줄 수 있다.