CSS Grid Part-2

CSS Grid에 대해서 알아보자

Grid Items

Grid로 정의된 컨테이너의 자식 요소들은 자동으로 Grid Item으로 정의된다.

grid-row-start
grid-row-end
grid-column-start
grid-column-end

Grid Item을 배치하기 위해서는 Grid Line의 시작 위치와 끝 위치를 지정할 수 있다. 이제 숫자를 지정하거나 혹은 선 이름을 지정하거나, span 키워드를 사용할 수 있다.

하지만 지정된 선의 숫자를 일일이 확인하는 게 귀찮을 수 있다. 이 경우 지정된 선의 숫자에 이름을 부여할 수 있다.

span 키워드를 사용하면 조금 더 쉽게 Grid Item을 배치할 수 있다. span 키워드 + 숫자 조합은 숫자만큼 라인을 확장하는 개념이다. 기본값은 span 1이다.

/* span 키워드를 시작 위치에 작성하고, 끝 위치를 명시해서 확장할 수 있다*/
.item:nth-child(1) {
   grid-row-start: span 1;
   grid-row-end: 3;
   /* Column 2번에서 4번 까지*/
   grid-column-start: span 2;
   grid-column-end: 4;
}

grid-row

.item {
   grid-row-start: 2;
   grid-row-end: span 2;
}
// 위 코드 단축 속성
.item {
   grid-row: <grid-row-start> / <grid-row-end>
   grid-row: 1 / 2;
}
.item {   
   grid-row-start: 2;   
   grid-row-end: span 3; 
} 
.item {   
   grid-row: 2 / span 3; 
} 

grid-column

.item {   
   grid-column: <grid-column-start> / <grid-column-end>; 
}

grid-area

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

grid-auto-rows

암시적은 명시적처럼 특정 위치에 배치되는 요소를 제외한 외부 요소의 크기를 정의하는 데 사용한다.

명시적이 아닌 암시적 행(Track)의 크기를 정의한다. 아이템(Item)이 grid-template-rows로 정의한 명시적 행 외부에 배치되는 경우 암시적 행의 크기가 적용된다.

<div class="container">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
</div>
.container {
   width: 300px;
   height: 200px;
   display: grid;
   grid-template-rows: 100px 100px; /* 명시적 2개 행 정의 */
   grid-template-columns: 150px 150px; /* 명시적 2개 열 정의 */
   grid-auto-rows: 100px /* 그 외의 (암시적) 행의 크기 정의 */
}
.item:nth-child(3) {
   grid-row: 3 / 4;
}

명시적으로 확실히 예측할 수 있는 박스의 크기는 4개이다. 하지만 세 번째 줄에 오는 요소부터는 columns의 길이는 알 수 있지만 rows의 길이는 어떤 값이 올지 알 수 없다. 이렇게 확실하게 정해지지 않은 rows의 길이를 확실히 하고 싶은 경우 grid-auto-rows 프로퍼티로 길이를 명시할 수 있다.

grid-auto-columns

암시적 열(Track)의 크기를 정의한다. 아이템(Item)이 grid-template-columns로 정의한 명시적 열 외부에 배치되는 경우 암시적 열의 크기가 적용된다.

위 코드는 grid-auto-columns이 동작하지 않는 것처럼 보인다. 그 이유는 별도로 한 요소를 외부에 배치하지 않았기 때문이다. 이것이 무슨 말인지 알아보자. 아래 사진을 보면 숫자로 태그가 붙어있는 것을 확인할 수 있다.

두 개의 column, row가 있는 경우 아래와 같이 정의된다. 위 코드의 경우 자동으로 배치를 하므로 정의한 grid-template-columns을 벗어나지 않는다.

1   1     2     3   -3
2     요소   요소    -2
3                   -1

하지만 아래와 같이 코드를 작성하면 정의한 열 외부에 배치되기 때문에 grid-auto-columns이 적용되는 것을 확인할 수 있다.

grid-auto-flow

Grid-Container 내부에 있는 Grid-Items의 배치 방식을 결정하는데 사용하는 프로퍼티다.

row: 각 행 축을 따라 차례로 배치 기본값
column: 각 열 축을 따라 차례로 배치
row dense: 각 행 축을 따라 차례로 배치, 빈 영역 매움
column dense: 각 열 축을 따라 차례로 배치, 빈 영역 매움

grid-auto-flow: column;

배치하지 않은 아이템(Item)을 어떤 방식의 자동 배치 알고리즘으로 처리할지 정의한다.

align-self

단일 아이템을 수직(열 축)으로 정렬한다.

단, Grid Item의 세로 너비가 자신이 속한 그리드 행(Track)의 크기보다 작아야 한다.

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

justify-self

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

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

place-self

align-self + justify-self를 한번에 작성할 수 있는 단축 속성

.item {    
   place-self: <align-self> <justify-self>; 
}

minmax

minmax 함수는 행/열(Track)의 최소/최대 크기를 정의한다.

첫 번째 인수는 “최솟값”

두 번째 인수는 “최댓값”

.container {   
   grid-auto-rows: minmax(200px, auto);   
   grid-auto-columns: minmax(300px, auto); 
}

fit-content

fit-content() 함수는 행/열(Track)의 크기를 그리드 아이템(Item)이 포함하는 내용(Contents) 크기에 맞춘다. ‘내용의 최대 크기’를 인수로 사용한다.
minmax(auto, max-content)와 유사하다.

아래 사진처럼 첫 번째 column 중에 가장 긴 content를 기준으로 column 크기를 맞춘다. 두 번째도 동일한 로직이 적용된다.

Practice #1

Practice #2

columns: 4개
rows: 4개
Naming Convention
- navbar
- main
- sidebar
- content1
- content2
- content3

max-width: 550px 일때;

Practice #3

grid-column과 grid-row를 이용해 아래 사진과 같이 구현하세요

Practice #4

flexbox를 이용해서 구현하기

1. 보통

2. 최소 너비 601px → 최대 너비 1000px

3. 최대너비 600px

Practice #5

grid + flexbox를 이용해서 위 Practice #4 반응형을 구현하기.

1. 보통

2. 최소 너비 601px → 최대 너비 1000px

3. 최대너비 600px