css - grid

display : grid; 를 먼저 사용한 뒤 아래 속성들을 추가로 부여할 수 있다. 

 

격자 나누기 - grid-template-rows(columns)

간격 - gap

크기 미리 정하기 - grid-auto-rows(columns) 

원하는 위치에, 여러 칸에 걸쳐서 배치 - grid-row(column), span

이름으로 배치 - grid-area, grid-template-areas

 

 

격자 나누기 

grid-template-rows : 100px 200px 300px 

-> 첫번째, 두번째, 세번째 각각의 너비를 설정

grid-template-columns : 100px 200px 300px

-> 첫번째, 두번째, 세번째 각각의 높이를 설정

 

grid-template : rows와 columns를 한 번에 쓸 수 있다.

-> grid-template : 100px 200px 300px  / 100px 200px 300px;

     - 너비들 / 높이들 

- px대신 fr을 사용하면 비율로 배치 할 수 있다. ( 1fr 1fr 2fr 같은 식)

- grid-template: 1fr 1fr 1fr /  minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) ;

  -> minmax()를 통해 최소, 최대값 지정이 가능하고, 최대값만 1fr같은 비율 설정이 가능하다. 

- grid-template: 1fr 1fr 1fr /  repeat(6, 1fr);

  -> repeat을 통해 1fr사이즈 6개로 만들어줌

 

grid-template: repeat(3, minmax(200px,1fr)) / repeat(3, minmax(200px,1fr));

-> 위의 경우 가로세로 3번 반복하면서 최소 200px, 최대 비율 1:1:1 로 그려준다. 

 

간격넣기

gap : 16px; 과 같이 그리드 사이의 간격을 넣을 수 있다.

-> gap : 16px 32px; 로 하면 세로에 16, 가로에 32px의 간격이 생기는 식이다.  

 

크기 미리 정하기

- grid-template-rows(columns) 로 열이나 행의 크기만 설정 하고, 나머지 값은 설정값으로 부여 할 수 있다.

display: grid;
grid-template-columns: repeat(3, 1fr) ;
grid-auto-rows: 100px 150px 200px;

 

 

- 내부 컨텐츠가 15개라 가정시, 가로는 1 : 1 : 1의 비율로 3칸, 세로는 오토로 설정한 만큼 번갈아가며 설정된다.

만약, 값을 하나만 넣으면 해당 세로값으로만 일정하게 보여진다. 

 

 

 

원하는 위치에, 여러 칸에 걸쳐서 배치 

- grid-row(column), span

 

위치는 그리드 라인기준으로, 첫번째 세로 라인이1 끝이 6, 첫번째 가로 라인은 1, 끝은 5이렇게 보면 된다. 반대쪽은 아래쪽 꼭지점부터 -1로 계산해서 올라간다.

 

옆에 청록색 네모의 경우 

grid-row: 3 / 5;

grid-colum: 2 / -2;

이렇게 시작과 끝 라인번호를 적어줘도 되고, 

 

grid-row: 3 / span 2;

grid-colum: 2 / span 3;

이렇게 시작 라인번호부터 몇칸을 차지할지도 설정이 가능하다.

 

라인번호는 2와 -5 가 같은 곳을 의미한다.  위에서부터의 양수나 아래에서부터의 음수 모두 사용 가능하다.

예를들어 

grid-row: 3 / 5; -> grid-row: -3 / -1; 이렇게 동일하고

grid-colum: 2 / 6; -> grid-colum: -5 / -1; 이렇게 동일하다.  

 

 

이름으로 배치 

grid-area로 이름을 부여한 뒤 grid-template-areas로 이름의 값이 어디로 들어갈 지 설정한다.

- 간단한 배치의 경우 편리함.

 

grid-area : RED;  <- 이름에 쌍따옴표 없이!

 

grid-template-areas : "RED GREEN" "RED BLUE"; 

 

 

 

 

 

grid-area : RED;  ... 

 

grid-template-areas : ". GREEN" "RED BLUE"; 

 

-> 점으로 설정시 해당 칸은 비움.