CSS #15 -Grid2-

12172 단어 CSSCSS

1.Grid container속성-row gap, column gap, gap-

1. row gap

각 행과 행 사이의 간격(gutter)을 지정한다. 더 정확하게 그리드 선의 크기를 설정한다 표현할 수 있다.

💡사용법

.container{
row-gap: 크기;
}

2. column gap

각 열과 열 사이의 간격(gutter)을 지정한다.

💡사용법

.container{
column-gap: 크기;
}

3. gap

row gap, column gap을 아우르는 단축속성

💡사용법

.container{
gap: row크기 column크기;
}

2.Grid container속성-grid auto rows,grid auto columns-

💡여기서 암시적이라는 개념은 중요하다.
한마디로 예를 들어서 2X2짜리 표에서 3X1에 암시적으로 크기를 설정해 두는 것을 의미한다.

1. grid auto rows

임시적 행(track)의 크기를 정의합니다.
아이템이 grid-template-row로 정의한 명시적 행 외부에 배치되는 경우 암시적 행의 크기가 적용된다.

2. grid auto columns

임시적 열의 크기를 정의합니다.
아이템이 grid-template-row로 정의한 명시적 열 외부에 배치되는 경우 암시적 열의 크기가 적용된다.

💡암시적 크기가 적용된 행과 열은 양수 라인 번호만 사용할 수 있다.(음수 사용 불가)


3.Grid container속성-grid auto flow

배치하지 않은 아이템을 어떤 방식의 '자동 배치 알고리즘'으로 처리할지 정의한다.
💡배치한 아이템은 grid-area(이하 개별 속성 포함)를 사용한 아이템을 의미한다.

의미기본값
row각 행(수평축) 축을 따라 차례로 배치row
column각 열(수직축) 축을 따라 차례로 배치
row dense(dense)각 행 축을 따라 차례로 배치, 빈 영역을 메움
column dense각 열 축을 따라 차례로 배치, 빈 영역을 메움

💡rowdens와 row의 차이
1. grid-auto-flow:row;의 경우 박스의 크기에 따라 줄맞춤하여 위에서부터 아래로 지그재그로 쌓이는 형식이다.

2.grid-auto-flow:rowdense;라고 한다면 만약 2번박스가 커서 두번째 줄에 간다면 3번과 4번박스는 위에 빈 공간을 채우는 개념이다. grid-auto-flow:row의 경우 지그재그임으로 빈공간을 채우지는 않는다.

3.grid-auto-column과 columndense도 위와 같다.


4.Grid container속성-grid template rows, grid template columns-

1.grid-template-rows

명시적 행의 크기를 정의한다.
동시에 라인의 이름도 정의할 수 있다.
2. fr()단위를 사용할 수 있다.
3. repeat()함수를 사용할 수 있다.

💡사용법
사용법은 grid-template-columns와 같다.
라인의 이름을 정의할 때 중복으로 쓸 수 있으며 [선이름1 선이름1*]인 띄어쓰기로 입력할 수 있다.

2.grid-template-columns

명시적 열의 크기를 정의한다.
동시에 라인의 이름도 정의할 수 있다.
2. fr()단위를 사용할 수 있다.
3. repeat()함수를 사용할 수 있다.

💡사용법
사용법은 grid-template-rows와 같다.


5.Grid container속성- grid row, grid column, grid area-

1. grid row

grid-row-start, grid-row-end의 단축속성이다.
각 속성을 '/'로 구분하는 것에 주의해야 한다.

2.grid column

위와 같다.

3. grid-area

  1. grid-row-start(or end), grid-column-start(or end)의 단축속성이다.
  2. grid-template-areas와 같이 참조할 영역이름을 설정할 수 도 있다.

💡사용법

.item{
grid-area:<grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>
grid-area:영역이름;
}

6.Grid container속성-grid template-

grid-template-rows, grid-template-columns, grid-template-areas의 단축속성이다.

💡사용법
1.

.container{
grid-template:<grid-template-rows> / <grid-template-columns>;
grid-template:<grid-template-areas>;
}

2.
.container{
grid-template:
[1행시작선이름]"areas"행너비[1행끝선이름]
[2행시작선이름]"areas"행너비[2행끝선이름]
/ <grid-template-columns>;
}

7.Grid container속성-grid-

grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns의 단축속성이다.

💡사용법

.container{
grid:<grid-template>;
grid:<grid-temaplate-rows> / <grid-auto-flow> <grid-auto-columns>;
grid:<grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;
}

8.Grid container속성-align content, justify content-

1. align-content

그리드 콘테츠를 수직(열 축)정렬한다.
그리드 콘텐츠의 세로 너비가 그리드 컨테이너보다 작아야한다.

의미기본값
normalstretch와 같다normal
start시작점(위쪽)정렬
center수직 가운데 정렬
end끝점(아래쪽)정렬
space-around각 행 위아래에 여백을 고르게 정렬
space-between첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백에 고르게 정렬
space-evenly모든 여백을 고르게 정렬
stretch열 축을 채우기 위해 그리드 콘텐츠를 늘림

2. justify-content

그리드 콘텐츠를 수평(행축)정렬한다.
그리드 콘텐츠의 가로 너비가 그리드 컨테이너보다 작아야 한다.

의미기본값
normalstretch값과 같다normal
start시작점(왼쪽)정렬
center수평 가운데 정렬
end끝점(오른쪽)정렬
space-around각 열 좌우에 여백을 고르게 정렬
space-between첫 열을 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
space-evenly모든 여백을 고르게 정렬
stretch행 축을 채우기 위해 그리드 콘텐츠를 늘림

9.Grid container속성-align items, justify items-

1. align-items

그리드 아이템들을 수직(열축)정렬한다.
그리드 아이템 세로 너비가 자신이 속한 그리드 행의 크기보다 작아야 한다.

의미기본값
normalstretch와 같다normal
start시작점(위쪽) 정렬
center수직 가운데 정렬
end끝점(아래쪽)정렬
stretch열 축을 채우기 위해 그리드 아이템을 늘림

2. justify-items

그리드 아이템들을 수평(행 축)정렬한다.
그리드 아이템의 가로 너비가 자신이 속한 그리드 열의 크기보다 작아야 한다.

의미기본값
normalstretch와 같다normal
start시작점(왼쪽) 정렬
center수평 가운데 정렬
end끝점(오른쪽)정렬
stretch행 축을 채우기 위해 그리드 아이템을 늘림

10.Grid container속성-align self, justify self-

1. align-self

단일 그리드 아이템을 수직(열 축)정렬한다.
그리드 아이템의 세로 너비가 자신이 속한 그리드 행의 크기보다 작아야 한다.

의미기본값
normalstretch와 같다normal
start시작점(위쪽)정렬
center수직 가운데 정렬
end끝점(아래쪽)정렬
stretch열 축을 채우기 위해 그리드 아이템을 늘림

2. justify-self

단일 그리드 아이템을 수평(행 축)정렬한다.
그리드 아이템의 가로 너비가 자신이 속한 그리드 열의 크기보다 작아야 한다.

의미기본값
normalstretch와 같다normal
start시작점(왼쪽)정렬
center수평 가운데 정렬
end끝점(오른쪽)정렬
stretch행 축을 채우기 위해 그리드 아이템을 늘림

11.Grid container속성-order, z-index-

1.order

그리드 아이템이 자동 배치되는 순서를 변경할 수 있다.
숫자가 적을수록 앞서 배치된다.

💡사용법에 대한 예시

.container{
display:grid;
grid-template-rows:repeat(2, 1fr);
grid-template-columns:repeat(2, 1fr);
}
.item:nth-child(1){order:1;}
.item:nth-child(2){order:5;}
.item:nth-child(3){order:-1;}

2. z-index

z-index속성을 이용해 아이템이 쌓이는 순서를 변경할 수 있다.

💡사용법에 대한 예시

.item:nth-child(1){
grid-area: 1 / 1 / 2 / 3;
}
.item:nth-child(2){
grid-area: 1 / 2 / 3 / 3;
z-index:1;
}
.item:nth-child(3){
grid-area: 2 / 2 / 3 / 4;
}

위 예시를 실행시켜보면 z-index로 인해서 nth-child(2)가 제일 위에 쌓인 것을 알 수 있다.

z-index는 position과 grid에서 쓸 수있다.

좋은 웹페이지 즐겨찾기