CSS - Grid

참고 : https://studiomeal.com/archives/533

GridPermalink

• 가장큰차이점은 flex 는 한방향이고, grid 는 두방향이다.
• 예상할수있는 범위이면 grid, 예상할수없는 범위이면 인터넷 익스프로러를 쓰기힘들다

• flex와 마찬가지로 컨테이너(부모)와 아이템(자식)이 있다.

• 그리드 컨테이너
• 그리드 아이템
• 그리드 트랙 (grid 의 행row 또는 열 column)
• 그리드 셀 (gird 의 한 칸 )
• 그리드 라인 ( grid 셀을 구분하는 선)
• 그리드 번호(grid 라인의 각 번호)
• 그리드 갭 ( grid 셀 사이의 간격)
• 그리드 영역 (grid 라인으로 둘러싸인 사각형 영역, 그리드 셀의 집합이다. )

grid의 기본 형태Permalink

• grid 컨테이너에 적용하는속성
  • grid-template-rows (실습해서 예시 밑에 달아주기)

    /* grid-template-rows: 200px 200px auto; */
    /* grid-template-rows: repeat(2, 1fr); */   

-> columns 와 사용방법이 같음

• grid-template-columns
  • fr: fraction (비율- 꽉채울수있는 공간이있으면 다채운다.)
  • repeat 함수로 반복할수있다 ex) repeat( 3, 1fr)

<style>
    .grid-container {
        display: grid;
        /* grid-template-columns: 100px 300px 200px; */
        /* fr: fraction */
        /* grid-template-columns: 1fr 2fr 1fr; */
        /* grid-template-columns: 1fr 500px 1fr; */
        /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
        grid-template-columns: repeat(3, 1fr);
        /* grid-template-columns: repeat(3, 1fr 2fr 1fr); */
        height: 80vh;
    }
</style>

자동으로 채우기Permalink

• 최소, 최댓값 결정 minmax() 함수
• 자동으로 채우기 auto-fill, auto-fit
  • grid-template-columns: repeat(auto-fill, minmax(20%, auto));
  • medea 를 쓰지않고도 컬럼갯수의 변화를 줄수있다. (반응형으로 )
  • auto-fit 은 갯수가 모자란경우 알아서 남은 공간을 꽉 채워준다. (auto-fill과 auto-fit 의차이)

셀 간격 만들기Permalink

• row-gap(행사이간격), column-gap(열사이간격) , gap(둘다간격)

그리드 자동 정의Permalink

• grid-auto-columns
• gird-auto-rows
• 통제를 벗어난 (자동) 뭐가더붙을지 모르는 경우에

각 셀의 영역 지정Permalink

(grid 아이템에 적용하는 속성)

• grid-column-start
• grid-column-end
• grid-coulumn
  • grid-column 1/3 → 1번 라인에서 3번 라인까지 (셀이 아님!)
• grid-row-start
• grid-row-end
• grid-row
  • ex) grid-row : 3 / span 2 ; (점유하는 칸수를 의미한다)

→ 남의 영역까지 침범 할수도 있는데 겹치기 기발한것 많이 할 수 있다.

영역 이름 사용하기Permalink

• grid-template-areas (직관적인 방법이다)
• ex
• 빈칸은 마침표 또는 “none”을 사용해도 된다.

자동 배치 알고리즘Permalink

• 이미지 붙이기

정렬하기Permalink

• flex 와 비슷한게 많다.
• 세로방향 정렬 - align-items

.container {
	align-items: stretch;
	align-items: start;
	align-items: center;
	align-items: end;
}

• 가로방향 정렬 - justify-items

.container {
	justify-items: stretch;
	justify-items: start;
	justify-items: center;
	justify-items: end;
}

• place-items (위 두개를 같이쓸수있는 단축 속성)
  • ex ) place-items: center start;
• 아이템 그룹 세로 정렬 -align-content

.container {
	align-content : stretch;
	align-content : start;
	align-content : center;
	align-content : end;
	align-content : between;
	align-content : space-around;
	align-content : space-evenly;
}

• 아이템 그룹 가로 정렬 - justify-content

    .container {
    	justify-content  : stretch;
    	justify-content  : start;
    	justify-content  : center;
    	justify-content  : end;
    	justify-content  : between;
    	justify-content  : space-around;
    	justify-content  : space-evenly;
    }
  

• place-content (두개 같이쓸수있는 단축 속성)
  • ex) place-content : space-between center;

• 개별 아이템 세로 정렬 - align-self

    .item {
    	align-self  : stretch;
    	align-self  : start;
    	align-self  : center;
    	align-self  : end;
    }
      
  

• 개별 아이템 가로 정렬 - justify-self

    .item {
    	justify-self  : stretch;
    	justify-self  : start;
    	justify-self  : center;
    	justify-self  : end;
    }
      
  

• place-self ( 위 두개 다 사용할수있는 단축 속성)
  • ex) place-self : start center;

• 배치순서 - order ( 시각적 나열 순서를 결정하는 속성)

• z-index (z축을 정렬할 수 있다. 숫자가 클수록 위로 올라온다. )