본문 바로가기
freeCodeCamp 프리코드캠프/1 반응형 웹 디자인

1-7 CSS 그리드 - CSS Grid

공부개미 2020. 9. 16. 14:17

알아야 할 내용

소개

CSS 그리드를 사용하면 복잡한 웹디자인이 훨씬 쉬워진다.

 

CSS 그리드는 HTML 엘레먼트를 그리드 콘테이너로 만들어, 행과 열로 정렬할 수 있다.

또한 칠드런 엘레먼트 (children, 하위 아이템) 를

그리드 콘테이너 내 어디에 어떻게 배치시켜야 하는지 설정할 수 있다.

목록

Create Your First CSS Grid

CSS 그리드 만들어보기

프리코드캠프로 가기

목록으로 돌아가기

설명

HTML 엘레먼트를 그리드 콘테이너로 만드는 방법은 간단하다.

디스플레이(display) 프로퍼티를 그리드(grid) 로 설정하면 된다.

그러면 CSS 그리드와 관련된 모든 프로퍼티를 사용할 수 있게 된다.

 

CSS 그리드에서는

패런트(parent, 상위) 엘레먼트를 콘테이너라고 하고,

칠드런(children, 하위) 엘레먼트를 아이템이라고 한다.

문제

1. <div> 엘레먼트를 CSS 셀렉터를 이용하여, .container 클래스를 셀렉트(select) 해보자.

2. 콘테이너 클래스를 셀렉트 했다면, display: grid; 를 설정하자.

답변

.container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    /* Only change code below this line */
    display: grid;
    /* Only change code above this line */
  }

Add Columns with grid-template-columns

그리드에 콜럼(column) 만들어 보기

프리코드캠프로 가기

목록으로 돌아가기

설명

그리드를 만드는 것만 가지고는 아무것도 하지 못 한다.

그리드의 구조를 제대로 갖춰야 그 다음 단계로 나아갈 수 있다.

 

콜럼(column, 열) 을 추가 하기 위해서는

그리드 템플렛 콜럼 (grid-template-columns) 프로퍼티를 사용하여

콜럼의 템플렛 구조를 먼저 만들어야 한다.

 

아래 예시는 콘테이너 클래스에

그리드 및 콜럼 템플렛을 적용한 코드이다.

 

.container {
  display: grid;
  grid-template-columns: 50px 50px;
}

 

이렇게 하면,

50px 너비의 콜럼 2개가 생긴다.

 

숫자를 몇 개 부여하느냐에 따라

콜럼의 숫자도 함께 바뀐다는 것을 알 수 있다.

문제

 

위의 이미지와 같이 콜럼 없이,

5개의 로우(row, 행) 만 있는 콘테이너가 있다.

 

1. 콘테이너 클래스에 콜럼 템플렛 프로퍼티를 설정해보자.

2. 여기에 100px 크기의 콜럼을 3개 만들어보자.

 

콜럼 설정을 제대로 한다면,

아래와 같은 이미지가 화면에 보일 것이다.

 

 

이렇게 콜럼 수와 콘테이너 크기에 맞춰서

각 위치에 알맞게 들어가 있는 모습을 확인할 수 있다.

답변

.container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* Only change code below this line */
    grid-template-columns: 100px 100px 100px;
    /* Only change code above this line */
  }

Add Rows with grid-template-rows

그리드에 로우(row) 만들어 보기

프리코드캠프로 가기

목록으로 돌아가기

설명

위에서는 로우(row, 행) 의 수가

콜럼 수와 콘테이너 크기에 따라 알아서 맞춰졌다.

 

이번에는

그리드 템플렛 로우 (grid-template-rows) 프로퍼티를 사용해보자.

설정 방법은 콜럼 템플렛이나 로우 템플렛이나 같다.

문제

아래와 같은 이미지가 먼저 보일 것이다.

 

 

1. 이번에는 로우 템플렛을 설정해보자.

2. 50px 크기의 로우 2개를 만들어보자.

 

큰 차이는 없지만,

로우의 크기가 약간 더 커지는 것이 보일 것이다.

답변

.container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    /* Only change code below this line */
    grid-template-rows: 50px 50px;
    /* Only change code above this line */
  }

Use CSS Grid units to Change the Size of Columns and Rows

CSS 그리드 단위 살펴보기

프리코드캠프로 가기

목록으로 돌아가기

설명

CSS 그리드에서는

로우와 콜럼의 사이즈를 정의할 때

픽셀(px) 이나 렘(rem) 과 같은

절대(absolute) 단위나 상대(relative) 단위를 사용할 수 있다.

 

픽셀과 렘 외에도 더 있다.

 

fr (fraction, 비율) 공간의 비율에 맞춰 조정
auto (오토) 콘텐츠에 맞춰 자동 조정
%  콘테이너의 퍼센트에 맞춰서 조정

 

이를 모두 사용한 예를 다음과 같다.

 

grid-template-columns: auto 50px 10% 2fr 1fr;

 

콜럼 템플렛에 항목을 5가지를 넣어봤다.

결과적으로 콜럼이 5개가 만들어진다는 것이다.

 

첫 번째 콜럼은 오토이기 때문에, 콘텐츠에 따라 자동적으로 변할 것이다.

두 번째 콜럼은 절대 수치인 50픽셀로 설정했다.

세 번째 콜럼은 콘테이너의 10% 크기로 설정했다.

네 번째와 다섯번째 콜럼은 프랙션(fraction) 으로 설정했다.

남은 공간의 2/3는 네 번째 콜럼에 할당하고,

1/3은 다섯번째 콜럼에 할당했다.

문제

위 예시의 설정에 따라

화면에 콜럼이 설정된 것이 아래와 같은 이미지로 보일 것이다.

 

 

1. 콜럼을 3개로 변경해보자.

2. 각 콜럼의 설정은, 1fr , 100px , 2fr 로 설정한다.

 

제대로 설정하면,

위의 이미지가 아래와 같은 이미지로 변경되는 것을 확인할 수 있다.

 

답변

.container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* Only change code below this line */
    grid-template-columns: 1fr 100px 2fr;
    /* Only change code above this line */
    grid-template-rows: 50px 50px;
  }

Create a Column Gap Using grid-column-gap

콜럼 사이에 공간 만들기

프리코드캠프로 가기

목록으로 돌아가기

설명

지금까지 만들어본 그리드는

전부 따닥따닥 함께 붙어 있었다.

 

이번에는 그리드 사이에

약간의 갭(gap, 공간) 을 만들어보자.

 

콜럼 간 갭을 만들 때에는

grid-column-gap 프로퍼티를 사용하면 된다.

 

grid-column-gap: 10px;

 

이렇게 설정하면

콜럼 간 10px 크기의 갭이 생긴다.

문제

현재 프리코드캠프 화면에는 아래와 같은 이미지가 있다.

 

 

1. 여기에 20px 크기의 콜럼 갭을 만들어보자.

 

제대로 한다면

아래와 같은 이미지가 만들어질 것이다.

 

답변

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    /* Only change code below this line */
    grid-column-gap: 20px;
    /* Only change code above this line */
  }

Create a Row Gap using grid-row-gap

로우 사이에 공간 만들기

프리코드캠프로 가기

목록으로 돌아가기

설명

콜럼 간에 갭을 만들 수 있듯이

로우(row, 행) 간에도 갭을 만들 수 있다.

 

grid-row-gap 프로퍼티를 사용하면 된다.

문제

현재 아래와 같은 이미지가

프리코드캠프 화면에 보일 것이다.

 

 

1. 5px 크기의 로우 갭을 설정해보자.

 

제대로 설정한다면,

아래와 같은 이미지를 확인할 수 있을 것이다.

 

 

잘 안 보일 수도 있지만,

첫 번째 줄과 두 번째 줄 간에

간격이 약간 있는 것을 확인할 수 있다.

답변

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    /* Only change code below this line */
    grid-row-gap: 5px;
    /* Only change code above this line */
  }

Add Gaps Faster with grid-gap

그리드 갭 사용해보기

프리코드캠프로 가기

목록으로 돌아가기

설명

그리드 갭 (grid-gap) 프로퍼티를 사용하면

로우(row) 와 콜럼(column) 의 갭을 한꺼번에 처리할 수 있어 용이하다.

 

그리드 갭 프로퍼티에 숫자가 1개만 있다면

로우와 콜럼에 모두 같은 크기의 갭을 적용한다.

 

그리드 갭 프로퍼티에 2개의 숫자를 넣을 경우

첫 번째 숫자는 로우 갭이고

두 번째 숫자는 콜럼 갭이다.

문제

아래와 같은 이미지가

프리코드캠프 화면에 보일 것이다.

 

 

1. 그리드 갭 프로퍼티를 사용해보자.

2. 로우에는 10px, 콜럼에는 20px 갭을 만들어보자.

 

제대로 적용하면

아래와 같은 이미지를 확인할 수 있다.

 

답변

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    /* Only change code below this line */
    grid-gap: 10px 20px;
    /* Only change code above this line */
  }

Use grid-column to Control Spacing

각 그리드의 가로길이 조정하기

프리코드캠프로 가기

목록으로 돌아가기

설명

지금까지 살펴본 컨셉은 모두

그리드 콘테이너와 관련된 내용이었다.

 

프리코드캠프 웹사이트에

미리 적용된 CSS 덕분에

그리드 콘테이너가 어떻게 나눠지고 구성되는지

조금 더 쉽게 확인했다.

 

하지만 우리가 직접 미리 적용된 CSS 없이

그리드 콘테이너를 만들어 본다면

눈에 보이지 않아 생각보다 힘들다는 것을 알게 될 것이다.

 

그래서 그리드 콘테이너에 대한 개념을 확실하게 이해해야 한다.

 

그리드를 구성하는 눈에 보이지 않는 선이 있다는 것은 이해했을 것이다.

이를 라인(lines) 이라고 한다.

 

콜럼과 같은 경우,

왼쪽부터 시작해서 오른쪽 끝까지

각 선에 숫자를 매긴 것이다.

 

로우와 같은 경우,

위에서 시작하여 아래 끝까지

각 선에 숫자를 매긴 것이다.

 

이를 3x3 크기의 그림으로 본다면 아래와 같다.

파란선은 콜럼 라인이고

검은선은 로우 라인이다.

 

 

칸의 숫자는 가로로 3개, 세로로 3개 이지만,

콜럼 라인과 로우 라인은 그보다 1개씩 더 많다는 것을 확인할 수 있다.

우리가 직접 손으로 칸을 그릴 때와 마찬가지의 개념이다.

 

여기서 각 칸의 크기를 조정하려면 어떻게 해야 할까?

 

먼저 특정 칸을 타게팅 한 이후에

라인 숫자를 이용하여 설정하면 된다.

 

grid-column: 1 / 3;

 

특정 칸을 타게팅 했다고 가정하면

위에서 설정한 그리드 콜럼은

콜럼 라인 1 부터 3 까지 자리를 차지해야 한다.

이 의미는 칸을 2개 차지할 것이라는 것이고,

콜럼 라인으로는 가로 길이를 조정한다는 의미도 된다.

문제

프리코드캠프 화면에 아래와 같은 이미지를 확인할 수 있다.

 

 

1. 먼저 우리가 타게팅할 아이템은 .item5 클래스이다.

2. 초록색 5 번 박스를 타게팅 해야 한다는 것이다.

2. 여기에 그리드 콜럼 프로퍼티를 넣어보자.

3. 초록색 5번 박스가 현재는 1개 칸만 차지하고 있는데, 가로로 두 칸을 차지하게 만들어 보자.

 

제대로 한다면, 아래와 같은 이미지를 확인할 수 있을 것이다.

 

답변

.item5 {
    background: PaleGreen;
    /* Only change code below this line */
    grid-column: 2/4;
    /* Only change code above this line */
  }

Use grid-row to Control Spacing

각 그리드의 세로길이 조정하기

프리코드캠프로 가기

목록으로 돌아가기

설명

이번에는 그리드의 세로길이를 조정해보자.

 

이번에도 위에서 살펴본 것과 마찬가지로

그리드 라인으로 설정하면 되는데

이번에는 로우 라인을 사용해야 한다.

문제

현재 아래와 같은 이미지가

프리코드캠프 화면에 있을 것이다.

 

 

1. .item5 클래스로 타게팅 된 엘레먼트가 세로로 두 칸을 차지하게 만들어보자.

 

세로로 두 칸을 차지한다는 의미는

행 두 칸을 차지한다는 의미이므로

로우(row, 행) 라인을 사용해야 한다.

 

제대로 설정만 한다면

아래와 같은 이미지를 확인할 수 있을 것이다.

 

답변

.item5 {
    background: PaleGreen;
    grid-column: 2 / 4;
    /* Only change code below this line */
    grid-row: 2/4;
    /* Only change code above this line */
  }

Align an Item Horizontally using justify-self

그리드 안에 있는 콘텐츠 가로 방향으로 정렬해보기

프리코드캠프로 가기

목록으로 돌아가기

설명

CSS 그리드에서는

콘텐츠가 들어가는 각 박스를 셀(cell) 이라고 한다.

 

셀 안에 있는 콘텐츠를

가로 방향으로 정렬하고 싶다면

해당 그리드 아이템에

저스티파이 셀프 (justify-self) 프로퍼티를 사용하면 된다.

 

저스티파이 셀프의 프로퍼티에는

기본값으로 스트레치 (stretch) 가 적용되어 있다.

스트레치는 셀 가로 전체를 채우는 방식이다.

 

start  셀의 시작 부분인 왼쪽에 정렬
center 셀 가운데로 정렬
end 셀의 끝 부분인 오른쪽에 정렬

문제

현재 프리코드캠프 화면에는

아래와 같은 이미지가 있다.

 

 

1. 저스티파이 셀프 (justify-self) 프로퍼티를 사용하여, .item2 클래스의 콘텐츠를 가운데로 정렬해보자.

 

제대로 적용한다면

아래와 같은 이미지를 확인할 수 있을 것이다.

 

 

이로써 각 셀에는 기본값인 스트레치가 적용되어 있다는 것을 알 수 있다.

답변

.item2 {
    background: LightSalmon;
    /* Only change code below this line */
    justify-self: center;
    /* Only change code above this line */
  }

Align an Item Vertically using align-self

그리드 안에 있는 콘텐츠 세로 방향으로 정렬해보기

프리코드캠프로 가기

목록으로 돌아가기

설명

가로 방향으로 콘텐츠를 정렬할 수 있듯이

세로 방향으로도 물론 정렬이 가능하다.

 

얼라인 셀프 (align-self) 프로퍼티를 사용하면 된다.

 

이 프로퍼티는

저스티파이 셀프 (justify-self) 프로퍼티와 

같은 값을 넣어서 사용하면 된다.

문제

현재 아래와 같은 이미지가 있다.

 

 

1. .item3 클래스에 align-self 프로퍼티를 넣어보자.

2. 여기에 end 값을 넣어보자.

 

제대로 한다면 아래와 같은 이미지로 바뀌는 것을 확인할 수 있다.

 

 

이와 같이 셀 안에 있는 콘텐츠가

셀의 가장 하단으로 움직인 것을 확인할 수 있다.

답변

.item3 {
    background: PaleTurquoise;
    /* Only change code below this line */
    align-self: end;
    /* Only change code above this line */
  }

Align All Items Horizontally using justify-items

모든 콘텐츠에 같은 정렬 방식 (가로방향) 적용하기

프리코드캠프로 가기

목록으로 돌아가기

설명

각 셀에 있는 콘텐츠를 일일이 정렬하지 않고

한 번에 같은 정렬 방식을 적용할 수도 있다.

 

justify-items 프로퍼티를

그리드 콘테이너에 적용하면

콘테이너 전체에

가로 방향으로 같은 정렬 방식이 적용된다.

문제

아래와 같은 이미지가 있다.

 

 

1. 이 그리드 컨테이너를 타게팅 한 CSS 셀렉터를 찾아보자.

2. 그리고 해당 셀렉터에 justify-items 프로퍼티를 적용해보자.

3. 이 프로퍼티의 값은 center 로 설정하자.

 

그러면 아래와 같은 이미지를 확인할 수 있다.

 

답변

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    /* Only change code below this line */
    justify-items: center;
    /* Only change code above this line */
  }

Align All Items Vertically using align-items

모든 콘텐츠에 같은 정렬 방식 (세로방향) 적용하기

프리코드캠프로 가기

목록으로 돌아가기

설명

얼라인 아이템 (align-items) 프로퍼티를 사용하면

그리드에 있는 모든 아이템을

세로 방향으로 정렬할 수 있다.

문제

현재 아래와 같은 이미지가 있다.

 

 

1. 모든 아이템을 셀렉트 하는 클래스를 먼저 찾아야 한다.

2. .container 클래스를 찾았다면, 모든 아이템을 각 셀 하단에 배치 시켜보자.

3. 프로퍼티의 값으로는 end 를 사용하면 된다.

 

그러면 아래와 같은 이미지로 변한다.

 

답변

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    /* Only change code below this line */
    align-items: end;
    /* Only change code above this line */
  }

Divide the Grid Into an Area Template

각 셀을 묶어 그룹 만들어 보기

프리코드캠프로 가기

목록으로 돌아가기

설명

CSS 그리드에서는

각 셀에 같은 이름을 부여하는 방식으로

그룹을 나눌 수 있다.

 

이 그룹을 애리어(area) 라고 한다.

 

그리드 템플렛 애리어 (grid-template-areas) 를 사용하면 된다.

 

방식은 아래의 예시와 같다.

 

grid-template-areas:
  "header header header"
  "advert content content"
  "footer footer footer";

 

가장 상단의 셀 3개는

헤더(header) 라는 이름으로 그룹을 만들었다.

 

가장 하단의 셀 3개는

푸터(footer) 라는 이름으로 그룹을 만들었다.

 

중간에 있는 셀 3개는 그룹을 2개로 나눈 것을 확인할 수 있다.

셀 1개는 advert 라는 이름으로,

나머지 셀 2개는 content 라는 이름으로 

그룹을 나눴다.

 

쉽게 생각하면,

각 위치에 따라 이름을 부여한 것이라고 생각하면 된다.

 

특정한 이름이 없는 셀에는

점( . )을 넣어주면 된다.

문제

현재 아래와 같은 이미지를 확인할 수 있다.

 

 

1. advert 라는 이름이 부여된 셀을 찾아보자.

2. 이 이름 대신 점( . )을 넣어보자.

 

아마 아무것도 바뀌지 않은 것을 확인할 수 있을 것이다.

답변

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    grid-template-areas:
    /* Only change code below this line */
      "header header header"
      ". content content"
      "footer footer footer";
    /* Only change code above this line */
  }

Place Items in Grid Areas Using the grid-area Property

그리드 애리어 살펴보기

프리코드캠프로 가기

목록으로 돌아가기

설명

그리드 콘테이너에

애리어 템플렛을 만들고 나면

각 셀에 부여한 이름대로 

아이템을 넣으면 된다.

 

이렇게 하기 위해서는

그리드 애리어 (grid-area) 프로퍼티를 사용하면 된다.

 

.item1 {
  grid-area: header;
}

 

위의 예기에서는

먼저 .item1 클래스를 셀렉트 하였다.

그리고 이전에 그리그 템플렛에 헤더라고 하는 곳에

.item1 클래스로 셀렉트한 아이템을 넣을 수 있게

그리드 애리어 프로퍼티에 헤더라는 값을 넣어주었다.

문제

현재 아래와 같은 이미지가 있다.

 

 

1. .item5 클래스에 그리드 애리어 프로퍼티를 추가하자.

2. 여기에 푸터 (footer) 라는 값을 넣어보자.

 

현재 그리드 템플렛에 그려진 밑그림에는

푸터가 가장 하단의 3개 셀을 모두 차지하고 있다.

그래서 아이템5 클래스를 푸터에 넣게 되면

아래와 같은 이미지로 바뀌게 된다.

 

답변

.item5 {
    background: PaleGreen;
    /* Only change code below this line */
    grid-area: footer;
    /* Only change code above this line */
  }

Use grid-area Without Creating an Areas Template

템플렛 없이 그리드 애리어 만들어보기

프리코드캠프로 가기

목록으로 돌아가기

설명

만약에 위에서 살펴본 예시와 같은 그리드 템플렛이

아직 만들어지지 않은 상태라면 어떡해야 할까?

 

아래와 같이

곧바로 템플렛 겸 애리어를 동시에 설정할 수도 있다.

 

item1 { 
    grid-area: 1/1/2/4; 
    }

 

여기서 각 숫자가 위치한 곳마다 의미를 먼저 살펴봐야겠다.

 

첫번째 숫자는

가로방향으로 시작하는 라인 위치

두번째 숫자는

세로방향으로 시작하는 라인 위치

세번째 숫자는

가로방향으로 끝나는 라인 위치

네번째 숫자는

세로방향으로 끝나는 라인 위치

 

이전에 이미 그리드 라인에 대해서 살펴본 것을 기억할 것이다.

 

셀이 3개라면,

그리드 라인은 총 4개이다.

문제

아래와 같은 이미지가 있다.

 

 

1. 먼저 .item5 클래스가 셀렉트 되어야 한다.

2. 셀렉트 한 클래스 안에 그리드 애리어 프로퍼티를 넣어보자.

3. 5번 박스가 가장 하단의 셀 전체를 가로방향으로 꽉 차게 만들어보자.

 

 

이런 이미지로 바뀌게 만들면 된다.

답변

.item5 {
    background: PaleGreen;
    /* Only change code below this line */
    grid-area: 3/1/4/4;
    /* Only change code above this line */
  }

Reduce Repetition Using the repeat Function

반복 기능 알아보기

프리코드캠프로 가기

목록으로 돌아가기

설명

그리드에 로우 100개를 만들고 싶다면 어떡해야 할까?

 

지금까지 배운 방법만 사용한다면

100개 로우에 대한 템플렛을 일일이 써야 하는데 말이다.

 

이런 경우,

아래의 예시와 같이

리핏(repeat, 반복) 기능을 사용하면 된다.

 

grid-template-rows: repeat(100, 50px);

 

이 예시에서는

100개의 로우를 만들고,

모든 로우의 높이, 즉 세로길이를 50픽셀로 설정한 것이다.

 

이 뿐만 아니라

아래 예시와 같이

리핏 기능을 일반 설정값과 섞어서 사용할 수도 있다.

 

grid-template-columns: repeat(2, 1fr 50px) 20px;

 

이를 하나씩 풀어서 설정한다면

아래 예시와 같다.

 

grid-template-columns: 1fr 50px 1fr 50px 20px;

문제

아래와 같은 이미지가 있다.

 

 

1. 셀렉트 된 클래스 중 .container 클래스가 보일 것이다.

2. grid-template-columns 에는 이미 각 셀의 비율이 하나씩 설정되어 있는 상태이다.

3. 이를 리핏 기능을 사용하여 바꿔보자.

 

이미지에 변화가 없어야 한다.

답변

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* Only change code below this line */
    grid-template-columns: repeat(3, 1fr);
    /* Only change code above this line */
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }

Limit Item Size Using the minmax Function

minmax 기능 살펴보기

프리코드캠프로 가기

목록으로 돌아가기

설명

이번에는 minmax 라는 기능에 대해서 살펴보려 한다.

 

이는 그리드 콘테이너 사이즈가 바뀔 때

아이템의 최소/최대 사이즈를 한정 시켜놓는 기능이라고 생각하면 된다.

 

grid-template-columns: 100px minmax(50px, 200px);

 

이 예시에서는

콜럼 템플렛에 2개의 콜럼을 세팅한 것이다.

첫번째 콜럼은 100px 로 설정했고,

두번째 콜럼은 최소 50px, 최대 200px 로 한정 시켜놓은 것이다.

문제

아래와 같은 이미지가 있다.

 

 

1. minmax 펑션(function, 기능)을 사용해보자.

2. .container 클래스에 현재 콜럼 템플렛 프로퍼티가 설정되어 있다.

3. 그리고 이 안에는 리핏 펑션이 설정되어 있다.

4. 여기서 1fr 으로 설정되어 있는 것을, 최소 90px / 최대 1fr 으로 설정을 바꿔보자.

 

화면이 크다면 별반 변화가 없겠지만,

화면을 사이즈를 바꿔보면 얘기가 다르다.

 

minmax 를 설정하지 않았을 때에는

화면 크기를 늘리고 줄여도 1fr 비율이

화면 크기에 맞춰 모든 셀에 일정하게 적용된다.

 

화면 사이즈를 늘렸을 경우

 

반대 경우

 

하지만 minmax 를 적용하여

최소 사이즈가 90px 로 설정되어 있다면,

화면 사이즈를 줄였을 때

아래와 같이 다른 결과가 나오게 된다.

 

minmax 적용

 

각 셀의 최소 사이즈가 정해지다 보니,

3번 박스가 그리드 콘테이너를 넘어가는 모양이 나왔다.

3번 박스 사이즈가 줄어든게 아니라

3번 박스가 콘테이너 바깥으로 넘어오게 된 것이다.

답변

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* Only change code below this line */

    grid-template-columns: repeat(3, minmax(90px, 1fr));

    /* Only change code above this line */
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }

Create Flexible Layouts Using auto-fill

오토필 알아보기

프리코드캠프로 가기

목록으로 돌아가기

설명

이번에는 위에서 사용한 펑션(function, 기능) 과 

오토필(auto-fill) 펑션을 섞어서 사용해보자.

 

repeat(auto-fill, minmax(60px, 1fr));

 

위의 예시를 살펴보면,

리핏 프로퍼티에

몇 개의 셀이 설정되어야 하는지 숫자를 넣지 않고

대신 자동으로 채워질 수 있게 오토필 펑션을 넣은 것이다.

문제

아래의 이미지를 먼저 확인해보자.

 

 

상단의 박스 5개는

오토필을 적용할 셀이고,

하단의 박스 5개는

오토필을 적용하지 않는 셀이다.

 

1. .container 클래스의 콜럼 템플렛이 이미 셀렉트 되어 있는 것을 확인할 수 있다.

2. 현재는 리핏 펑션에 숫자 3 이 설정되어 있다.

3. 이를 오토필로 변경해보자.

 

현재 화면 크기에 따라 아래 이미지와 같은 식으로 변경하는 것을 확인할 수 있다.

 

오토필 적용

 

화면을 더 크게 한다면, 아래와 같은 식의 이미지도 확인할 수 있다.

 

 

반대로 화면을 훨씬 더 작게 만든다면, 아래와 같은 이미지도 확인할 수 있을 것이다.

 

 

하단의 셀에는 3번 박스가 콘테이너를 넘어가

화면 상에서 아예 보이지도 않는 상태이다.

 

반대로 상단의 셀은

minmax 에 맞춰 자동으로 셀이 콘테이너에 맞춰 조정된다.

답변

.container {
    font-size: 40px;
    min-height: 100px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* Only change code below this line */

    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));

    /* Only change code above this line */
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }

Create Flexible Layouts Using auto-fit

오토핏 알아보기

프리코드캠프로 가기

목록으로 돌아가기

설명

오토핏 (auto-fit) 은 오토필 (auto-fill) 과 상당히 비슷하지만

차이점이 분명히 존재한다.

 

그림을 보면서 이해하는 것이 훨씬 쉬울 것 같다.

 

아래 이미지를 확인해보자.

상위에 있는 박스 5개는 오토필이 적용되어 있고,

하단에 있는 박스 5개에는 오토핏이 적용되어 있다.

 

 

이 콘테이너의 사이즈를 늘리게 되면

아래 이미지와 같이

오토필이 적용된 상위의 박스 5개와

오토핏이 적용된 하단의 박스 5개가

다른 식으로 자리잡게 된다.

 

 

오토필을 사용할 경우

새로운 셀이 계속해서 

새로운 자리에 자리 잡기 때문이다.

 

반대로

오토핏을 사용할 경우

아래 이미지와 같이

콘테이너 사이즈에 맞춰

셀의 사이즈가 늘어나게 된다.

 

그 이외에 다른 기능은

똑같다고 생각해도 될 듯 하다.

문제

1. CSS 셀렉터로 .container 클래스와 .container2 가 셀렉트 되어 있다.

2. 이 .container2 클래스 안에는 그리드 템플렛 콜럼 프로퍼티가 있다.

3. 이 프로퍼티의 리핏 펑션에 오토핏을 설정해보자.

 

콘테이너가 작을 때는 차이점이 없을 것이다.

하지만 콘테이너 사이즈를 크게 늘리면

위에서 설명한 것과 같은

차이점이 보일 것이다.

답변

.container2 {
    font-size: 40px;
    min-height: 100px;
    width: 100%;
    background: Silver;
    display: grid;
    /* Only change code below this line */
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    /* Only change code above this line */
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }

Use Media Queries to Create Responsive Layouts

CSS 그리드와 미디어 쿼리 함께 사용해보기

프리코드캠프로 가기

목록으로 돌아가기

설명

CSS 그리드와 미디어 쿼리를 함께 사용하면,

웹사이트를 더욱 리스폰시브(responsive, 반응형) 하게 만들 수 있다.

 

화면 뷰포트 (view port) 의 사이즈에 따라

그리드 위치를 자동으로 재구성 한다던지,

그리드의 사이즈를 조정한다던지,

각 셀의 설정을 조정한더던지 등으로 말이다.

 

프리코드캠프 화면을 보면,

아래와 같은 이미지가 있다.

 

 

.container 클래스를 확인해보면,

그리드 템플렛 콜럼에

원래는 1개 콜럼만 설정되어 있는 것을 확인할 수 있다.

 

.container {
    grid-template-columns: 1fr;
  }

 

그런데 미디어 쿼리로 감싼

.container 클래스에는

뷰포트가 300px 이상일 때에는

그리드 템플렛 콜럼이

2개 콜럼으로 설정된 것을 확인할 수 있다.

 

@media (min-width: 300px){
    .container{
      grid-template-columns: auto 1fr;
    }
  }

 

결국 화면의 크기가 300px 이상일 때에는

아래와 같이

콜럼이 2개로 구성되고,

 

 

화면의 크기가 300px 이하일 때에는

아래와 같이

콜럼이 1개로 구성된다는 것이다.

 

문제

1. 뷰포트가 400px 이상인 경우의 미디어 쿼리도 이미 설정되어 있다.

2. 이 경우, 헤더가 상단 전체 로우(row) 를 차지하게 만들어 보자.

3. 푸터(footer) 또한 하단 전체 로우를 차지하게 만들어 보자.

 

 

이런 화면이 구성된다면 성공한 것이다.

답변

@media (min-width: 400px){
    .container{
      grid-template-areas:
      /* Only change code below this line */
        "header header"
        "advert content"
        "footer footer";
      /* Only change code above this line */
    }
  }

Create Grids within Grids

그리드 안에 그리드 만들기

프리코드캠프로 가기

목록으로 돌아가기

설명

그리드 안에 있는 엘레먼트를

다시 그리드로 설정하게 되면

그리드 안에 그리드를 만들 수 있다.

 

현재 프리코드캠프 화면에는

아래와 같은 이미지가 있다.

 

 

먼저 각 셀을 분석해보자.

 

클래스 콘텐츠
.item1 헤더 (header)
.item2 advert (광고 삽입 칸)
.item3 문단1 및 문단2 (paragraph1, paragraph2)
.item4 푸터 (footer)
.itemOne 문단 1 (paragraph1)
.itemTwo 문단 2 (paragraph2)

 

현재 .item3 클래스로 셀렉트 된 셀 안에는

.itemOne 과 .itemTwo 클래스로 각각 셀렉트 된

별도의 아이템이 자리잡고 있는 것을 알 수 있다.

문제

1. 먼저 .item3 를 그리드로 세팅하자. 디스플레이 프로퍼티에, 그리드를 세팅하면 된다.

2. 그리드 템플렛 콜럼 프로퍼티를 사용하여, 2개의 콜럼을 생성하자.

3. 콜럼의 값은 각각 auto 와 1fr 을 사용해보자.

 

위에서 봤던 이미지가

아래와 같은 이미지로 바뀌는 것을 확인하면 된다.

 

답변

.item3 {
    background: PaleTurquoise;
    grid-area: content;
    /* Only change code below this line */
    display: grid;
    grid-template-columns: auto 1fr;
    /* Only change code above this line */
  }

CSS 그리드를 마치며...

 

목록으로 돌아가기

콘테이너, 콜럼, 로우라는 개념만

명확하게 이해하고 나니,

플렉스 박스에 대해 공부할 때보다

오히려 CSS 그리드에 대해 이해하기는

훨씬 수월했던 것 같다.

 

이제 다음 장부터는

지금까지 살펴봤던 모든 내용을

종합적으로 테스트 해보는 단계이다.

 

반응형 웹디자인 프로젝트로 가기

저작자표시 비영리 변경금지 (새창열림)

'freeCodeCamp 프리코드캠프 > 1 반응형 웹 디자인' 카테고리의 다른 글

1-6 CSS 플렉스 박스 - CSS Flexbox  (0) 2020.08.17
1-5 반응형 웹 디자인 원칙 - Responsive Web Design Principles  (0) 2020.07.24
1-4 접근성 - Applied Accessibility  (0) 2020.07.21
1-3 시각 디자인 - Applied Visual Design  (0) 2020.07.01
1-2 CSS  (0) 2020.05.09

'freeCodeCamp 프리코드캠프/1 반응형 웹 디자인' Related Articles

티스토리툴바