grid

grid container의 속성

display : grid / inline-grid

블록 그리드와 인라인 그리드로 디스플레이 변환

grid-template-rows / columns

명시적으로 그리드의 행과 열의 갯수와 너비를 정의
ex) grid-template-rows : 100px 100px / repeat(2,100px)

grid-auto-rows / columns

암시적으로 그리드의 행과 열의 갯수와 너비를 정의(명시적으로 정의한 부분을 벗어난 경우에 적용 )

grid-auto-flows : row / column (+dense)

그리드 아이템들의 정렬 방향을 정의, dense가 추가될 경우 빈공간을 우선적으로 채움

grid-template-areas

ex) grid-container {
grid-template-areas :
"head head"
"nav main"
"nav foot";
}
grid-items{
grid-area : head
}
그리드 아이템에서 이름을 정의하고 그리드 컨테이너에서 2차원 배열의 모양으로 큰따음표로 입력을 하면 직관적으로 아이템들이 정렬됨.

grid-items의 속성

grid-row / column

{
grid-row-start : 1; // 첫번째 행부터 채움
grid-row-end : 2; // 두번째 행까지 채움
}
{
grid-row : 1/ 2; // 첫번째 부터 두번째 행까지 채움
}
{
grid-row : span 2; // 두개의 행만큼 채움
}

grid 안에서 쓸수 있는 함수와 단위

min-content, max-content

min-content : 가장 긴 단어(한글은 글자)를 기준의 너비
max-content : 태그 내부의 텍스트의 길이를 기준의 너비
word-break : keep all // 한글도 영어처럼 단어기준 변환

auto-fit / fill

그리드의 행과 열의 갯수가 컨테이너와 아이템들의 크기에 맞춰서 유동적 변화
auto-fit : 지정할수 있는 최대 너비 기준
auto-fill : 지정할수 있는 최소 너비 기준

min-max

최대,최소의 너비를 지정하는 함수

flex의 일부 정렬 속성

남는 공간이 있을 경우 적용가능
flex와 다르게 main.croess 축으로 상대적이지 않고 고정되 있음
justify-content : 행축 기준의 정렬
align-content : 열축 기준의 정렬
justify-self : 특정 아이템의 그리드 내부에서 행축 기준으로 정렬
align-self : 특정 아이템의 그리드 내부에서 열축 기준으로 정렬