그리드 컨테이너
그리드 설정 - Grid 컨테이너
display
그리드 컨테이너 요소를 설정하고 그리드 포멧팅 컨텍스트(격자무늬) 영역을 생성한다.
flex와 마찬가지로
display: grid;
를 적용하는 것이 그리드의 시작이다.display: grid;
만 입력했을 때 아무런 변화도 일어나지 않는다.<grid>
:<inline-grid>
: block과 inline-block을 생각해보면 이해가 쉽다. inline-block 처럼 적용된다.<subgrid>
(Level2에서 지원 예정).grid-container { display: grid; /* display: inline-grid; */ }
<float>
<clear>
<column>
<vertical-align>
속성은 그리드 컨테이너 요소에 적용되지 않는다.
grid-template-rows/ grid-template-columns (명시적)
공백으로 구분된 값 리스트를 해석하여 그리드 행, 열을 설정합니다. 각 값은 트랙의 크기를 말합니다.
컨테이너의 그리드 트랙의 크기를 지정해 준다.
행과 열에 입력하는 크기에 갯수에 맞춰 행과 열이 생성된다.
단위 : px, rem, em, %, fr 등
auto : 자동 설정 (브라우저 크기에 따라 자동으로 변경됨.)
rows, columns 타이핑할 때 s 오타 조심하기!!!!!
예를들어 2행 4열의 그리드를 만들었을 때 아이템의 갯수가 6개라면 나머지 두 셀은 공백으로 남겨진다.
.grid {
display: grid;
grid-template-rows: 20% 100px auto; /* 3행 */
grid-template-columns: 40px 100px; /* 2열 */
/* grid-template-columns: 80px auto */
/* grid-template-columns: repeat(5, 1fr); */
/* grid-template-columns: 150px 1.5fr 2fr */
/* 속기형 */
/* grid-template: row values / column values; */
grid-template: repeat(5, 20px) / repeat(3, 1fr)
}
grid-row-gap grid-column-gap grid-gap
.grid {
display: grid;
grid-row-gap: 20px;
grid-column-gap: 10px;
/* 속기형 : row column */
grid-gap: 10px; /* 행과 열에 동일한 값 적용 */
grid-gap: 10px 20px;
}
fr(Fraction) 단위
컨테이너 전체 크기에서 숫자의 비율대로 트랙을 나눈다
.grid {
display: grid;
grid-template-columns: 2fr 1.3fr 1fr; /* 트랙을 2:1.3:1의 비율로 나눈다. */
}
repeat() 함수
반복되는 값을 자동으로 처리할 수 있는 함수이다.
repeat(반복횟수, 반복하는 값)
반복횟수 : 양수만 가능, 1이상 / 반복하는 값 : 그리드 트랙 리스트(배열)
.grid {
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
/* grid-template-rows: repeat(2, 1fr 2fr);
grid-template-columns: 1fr 2fr 1fr 2fr; */
}
minmax() 함수
최소값과 최대값을 지정할 수 있는 함수이다.
repeat() 함수 내부, 외부에서 사용할 수 있다.
minmax(최소값, 최대값)
부모 컨테이너의 크기가 최소값 미만으로 작아지지 않도록, 최대값 초과로 늘어나지 않도록 설정한다.
.grid {
display: grid;
/* 1, 2행 : 최소값 20px을 가지며 셀 안의 내용이 많아질 수록 트랙의 높이값이 자동으로 늘어난다 */
grid-template-rows: repeat(2, minmax(20px, auto));
/* grid-template-rows: repeat(2, minmax(20px, 1fr)); */
/* 1열 : 최소값 30px을 가지며 셀 안의 내용이 많아질 수록 트랙의 너비의 값이 자동으로 늘어난다.
2, 3열 : 1열의 너비를 제외한 나머지 공백의 공간을 1:1의 비율만큼 나눠가진다. */
grid-template-columns: minmax(30px, auto) repeat(2, 1fr);
}
grid-auto-rows grid-auto-columns (암시적 implict)
암시적인 그리드 트랙이란?
사용자가 설정하지 않은 임의의 트랙으로, 사용자가 명시적으로
grid-template-rows
/grid-template-columns
속성을 설정하지 않은 나머지 그리드 트랙을 가리킨다.즉, 아이템 박스는 생성되어 있으나
grid-template-rows
/grid-template-columns
속성이 설정되어 있지 않은 트랙을 말한다.단위 : px, rem, em, %, fr 등
속기형 없음
grid-auto-columns : https://developer.mozilla.org/ko/docs/Web/CSS/grid-auto-columns
grid-auto-rows : https://developer.mozilla.org/ko/docs/Web/CSS/grid-auto-rows
.grid {
display: grid;
grid-auto-rows: minmax(100px, auto);
/* min-content : 컨텐트의 개수 만큼 공간박스 설정 */
grid-auto-columns: min-content;
}
grid-auto-flow
아이템이 자동 배치되는 흐름을 결정하는 속성입니다.
row (기본값) : 각 행을 차례로 채우고 필요에 따라 새 행을 추가하는 자동 배치 알고리즘
column : 각 열을 차례로 채우고 필요에 따라 새 열을 추가하는 자동 배치 알고리즘
dense
배치 중 나중에 크기가 작은 아이템이 존재할 경우, 그리드 영역 앞부분의 남은 공간에 자동 배치하는 알고리즘
row와 column에 따라 기준이 달라진다.
row dense
column dense
<section class="grid-contianer">
<div class="item-a">item-a</div>
<div class="item-b">item-a</div>
<div class="item-c">item-a</div>
<div class="item-d">item-a</div>
<div class="item-e">item-a</div>
</section>
.grid-contianer {
display: grid;
grid-template: repeat(5, 60px) / repeat(2, 30px);
grid-auto-flow: row;
}
.item-a {
grid-row: 1 / 3;
grid-column: 1;
}
.item-e {
grid-row: 1 / 3;
grid-column: 5;
}
justify-items align-items 아이템 내부 콘텐츠 가로/세로 정렬
justify-items
: 행(row) 축을 따라 그리드 아이템 내부 콘텐츠를 정열한다.align-items
: 열(column) 축을 따라 그리드 아이템 내부 콘텐츠를 정렬한다.이 설정은 그리드 컨테이너 내부 모든 그리드 아이템에 적용된다.
값
stretch(기본값) : 그리드 영역 전체 너비를 채움
start : 그리드 영역의 시작점에 콘텐츠 정렬
center : 그리드 영역의 끝점에 콘텐츠 정렬
end : 그리드 영역 중앙에 콘텐츠 정렬
justify-content align-content : 아이템 트랙 가로/세로 정렬
justify-content
: 행(row) 축을 따라 아이템 트랙을 정렬한다.align-content
: 열(column) 축을 따라 아이템 트랙을 정렬한다.그리드 아이템들의 너비의 총 합이 그리드 컨테이너의 크기보다 작아야 한다.
그리드 아이템들에 설정되어 있는 너비값의 단위가 같아야 한다. (px 등)
값
stretch : 그리드 컨테이너 영역을 아이템 트랙 크기를 조정하여 채움
start : 그리드 컨테이너 영역의 시작점에 아이템 트랙을 정렬
center : 중앙에 아이템 트랙을 정렬
end : 끝점에 아이템 트랙을 정렬
space-around : 그리드 컨테이너의 남은 영역을 아이템 트랙(행)이 좌/우 공간으로 나눔 (양 가장자리 공간은 아이템 그룹 사이 간격의 1/2)
space-between : 그리드 컨테이너 영역의 양 가장자리 공백 없이, 아이템 트랙(행) 사이 공간을 나눔
space-evenly :
space-around
와 비슷해보이지만, 공간을 모두 동일하게 나누는 점이 다름
.grid {
display: grid;
justify-items: center;
align-items: center;
justify-content: center;
align-content: center;
}
place-items/ place-self 속기형
place-items 속성은 align-items 과 justify-items의 속기형이다.
place-self 속성은 align-self와 justify-self의 속기형이다.
Last updated
Was this helpful?