반응형
부모 요소에 사용하는 속성들
grid
GridBox란것을 정의 (이것만으로는 특별한 반응은 없음)
display: grid;
grid-template-columns
몇 열(columns)로 할 것인지, 박스들의 사이즈는 어떻게 할 것인지 지정.
grid-template-columns: 4fr 6fr; /* 4대 6으로 나눔 */
grid-template-columns: 40% 60%; /* %로도 사용은 가능 */
grid-template-columns: repeat(3, 1fr); /* 사이즈가 반복될 경우 repeat 방식으로도 가능 */
grid-template-columns: 1fr 1fr 1fr; /*위 repeat과 같다 */
grid-template-rows
몇 줄(rows)로 할 것인지, 박스들의 사이즈는 어떻게 할 것인지 지정.
grid-template-rows: auto;
grid-template-rows: 40px 4em 40px;
grid-template-rows: 1fr 2fr 1fr;
grid-template-rows: 3ch auto minmax(10px, 60px);
grid-gap
그리드 박스와의 간격을 지정.
grid-gap을 이용할 때 박스의 사이즈를 %로 지정하면 사이드 바가 생겨버리기 때문에 보통 fr을 사용.
grid-gap: 1em; /* 그리드 간의 여백 지정 */
grid-auto-rows
그리드 컨텐츠 높이를 맞추고 싶을 때
grid-auto-rows: 200px; /* 200px로 높이 지정 */
grid-auto-rows: minmax(200px, auto);
/* 최소 200px은 고정. 더 늘어나는 자손이 있다면 그만큼 늘어난다 */
justify-items
가로 정렬.
flex에서는 justify-contenst였지만 gridbox에선 justify-items를 사용.
justify-items: start; /* 각 박스가 왼쪽으로 정렬 */
justify-items: center; /* 각 박스가 가운데으로 정렬 */
justify-items: end; /* 각 박스가 오른쪽으로 정렬 */
align-items
세로 정렬.
1줄 이상의 콘텐츠 그룹을 세로축으로 정렬하는 align-content
align-items: start; /* 각 박스가 위쪽으로 정렬 */
align-items: center; /* 각 박스가 가운데로 정렬 */
align-items: end; /* 각 박스가 아래쪽으로 정렬 */
justify-self / aling-self
nth 속성을 이용하여 각각의 박스를 개별로 정렬 가능
justify-self : center;
aling-self : center;
자손 요소에 정렬하는 속성들
grid-column
가로 사이즈 범위 지정.
grid-column: 1/3 ;
grid-row
세로 사이즈 범위 지정
grid-row: 2/4;
grid-column / grid- row
위 명령만 사용할 경우 칸이 합쳐지면서 원하는 위치로 이동하지 않을 텐데, 시작 지정을 정해주는 것으로 위치를 지정해줄 수 있음.
grid-column: 3;※ 그리드 박스는 서로 다른 영역을 덮을 수 있음
반응형