Grids

김동현·2023년 1월 29일

목록 보기

18/24

What is grid layout?

CSS 그리드 레이아웃은 2차원 그리드 기반의 레이아웃 시스템이다.
그에 반해 Flexbox는 단방향 흐름을 다루는 레이아웃 시스템이다.

Defining a grid

그리드를 정의하기 위해 display 프로퍼티의 gird 값을 사용한다.
Flexbox의 flex item처럼 컨테이너의 모든 다이렉트 하위 항목들이 그리드 item이 된다.

.container {
  display: grid;
}

Flexbox와 달리 위의 코드를 적용해도 바로 바뀌지 않는다.
그리드는 기본적으로 하나의 column grid를 제공하기 때문이다.

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

grid-template-columns 프로퍼티를 사용해서 각 셀의 개수와 크기를 설정하면 바뀐다.
각 셀의 column 개수와 크기 설정한 이미지

Flexible grids with the fr unit

길이나 백분율 값 외에도 fr 단위를 사용하여 그리드 행과 열의 크기를 유연하게 조정할 수 있다.
이 단위는 그리드 컨테이너에서 사용 가능한 공간의 한 부분을 나타낸다.

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

첫 번째 column 트랙은 사용가능한 공간의 2fr을 얻고 나머지 두 트랙은 1fr을 얻는다.
fr와 단위와 고정 길이 단위 (예: px) 를 섞어서 사용할 수도 있다.
이 경우엔 고정 트랙에 필요한 공간부터 먼저 소모된 후 나머지 공간은 다른 트랙에 분배된다.
2fr 1fr 1fr 적용 이미지

Gaps between tracks

트랙 사이에 간격을 만들기 위해 column-gap 과 row-gap 프로퍼티를 사용한다.
두 개의 프로퍼티르르 합한 shorthand 프로퍼티로 gap 이 있다.

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 20px;
}

gap 적용 이미지
gap 의 값으로는 길이와 백분율만 사용가능하고 fr단위는 사용 불가하다.

gap 보다는 grid- prefix가 붙여진 grid-gap 이 익숙할 수 있으나, 이것은 올드한 버전이다.
여러 레이아웃 ( 예: flex ) 에서 사용할 수 있도록 하기 위해 prefix가 삭제되었다.
명세도 그에따라 바뀌었다.
한 동안은 브라우저에서 지원하겠지만 이젠 prefix가 없는 버전으로 사용하는게 옳다.

Repeating track listings

repeat() 함수를 사용하여 트랙 목록을 간편히 작성할 수 있다.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  //grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

첫 번째 매개변수는 반복 횟수이고 두 번째 매개변수는 트랙 목록이다.
위의 코드에서는 반복할 트랙 목록으로 1fr만 지정했지만
grid-template-columns: repeat(2, 20px 1fr); 처럼 두 개 이상의 목록을 인자로 넘겨줄 수 있다.

The implicit and explicit grid

지금까지 열 트랙만 지정했지만, 행 트랙도 자동으로 생성되고 있다.
명시적 그리드는 grid-template-column , grid-template-row 로 트랙을 생성한것을 의미한다.
암시적 그리드는 그리드 contents가 그리드 외부에 배치될 때 이미 정의된 명시적 그리드를 확장하는 것을 의미한다.
말이 어렵게 느껴질 수 있다.
예를들어 column 트랙을 3개 정의해놓고 row 트랙을 1개 정의해놓았다면 1행 3열짜리 그리드가 생길 것이다.
하지만 그리드 아이템이 4개가 주어진다면 4번째 그리드 아이템은 명시적 그리드를 확장시켜 2행에 배치될 것이다.

기본적으로 암시적 그리드에서 생성된 트랙은 auto 크기이며 일반적으로 content를 수용할 수 있는 크기로 설정된다.
암시적 그리드 트랙에 크기를 지정하려면 grid-auto-row 또는 grid-auto-column 프로퍼티를 이용하면 된다.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  gap: 20px;
}

grid-auto-row 적용 이미지

The minmax() function

트랙을 고정 크기로 제한하면 오버플로가 발생할 수 있다.
최소 100px 높이를 가지지만, 더 많은 contents가 추가되더라도 확장할 수 있는 트랙을 원한다면 minmax() 함수를 사용하면 된다.
매개변수가 두 개가 있다.
첫 번째 매개변수는 최소 값을 의미하고 두 번째 매개변수는 최대 값을 의미한다.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 20px;
}

As many columns as will fit

각 열이 최소 크기를 가지게 된다면 minmax() 나 repeat() 를 사용하여 컨테이너에 맞는 만큼의 열을 생성하도록 그리드에 요청할 수 있다.
repeat() 함수의 첫 번째 매개변수에 숫자를 전달하는 대신 키워드 auto-fill 를 전달하고 두 번째 매개변수에 minmax() 를 전달할 수 있다.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  gap: 20px;
}

적용 이미지

Line-based placement

그리드에는 항상 선(라인)이 있다.
이 선은 번호 1로 시작하며 writing mode 에 의존한다.

shorthand 프로퍼티인 grid-column , grid-row 에 시작 선과 끝 선을 지정하여 그리드 아이템을 배치할 수 있다.
시작 선과 끝 선을 / 로 구분하여 지정한다.

header {
  grid-column: 1 / 3;
  grid-row: 1;
}

article {
  grid-column: 2;
  grid-row: 2;
}

aside {
  grid-column: 1;
  grid-row: 2;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3;
}

예제 이미지
값 -1을 사용하여 끝 열 또는 행 선을 대상으로 한 다음 음수 값을 사용하여 끝에서 안쪽으로 셀 수도 있다.
또한 선은 항상 암시적 그리드가 아닌 명시적 그리드의 가장자리에서 계산된다.

Positioning with grid-template-areas

그리드에서 항목을 정렬하는 또 다른 방법이 있다.
grid-template-areas 프로퍼티를 이용하는 방법이다.

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}

코드만 봐도 직관적일 것이다.
grid-template-areas 를 사용한다면 다음의 규칙을 지켜야 한다.

그리드의 모든 셀을 채워야 한다.
두 개의 셀을 합병하고자 한다면 이름을 반복한다.
빈 셀로 지정하고싶다면 . 를 사용한다.
영역은 직사각형으로 정의해야 한다.
다른 곳에서 재사용할 수 없다.

Grid frameworks in CSS Grid

그리드 프레임워크는 약 12 또는 16 열 그리드를 기반으로 하는 경향이 있다.
이러한 프레임워크를 사용하려고 타사의 도구를 쓸 필요는 없다.

header {
  grid-column: 1 / 13;
  grid-row: 1;
}

article {
  grid-column: 4 / 13;
  grid-row: 2;
}

aside {
  grid-column: 1 / 4;
  grid-row: 2;
}

footer {
  grid-column: 1 / 13;
  grid-row: 3;
}