CSS grid 정리

Flex·2022년 2월 24일

CSS 모음

목록 보기

12/14

CSS grid 에 대해 정리해보았다.
격자 형식으로 컨테이너를 나눌 수 있는 display 속성이다.

🧊 flex 대신 grid 를 쓰는 이유?

flex 는 기본적으로 한줄로 요소들을 나열하는 1차원 개념을 가집니다.
물론 flex-wrap 속성을 부여하면 여러 줄로 나타낼 순 있지만 본래 flex 가 의도하던 배치와는 다릅니다. 억지로 그렇게 배치할 뿐이죠.

이에 반해 grid 는 태생부터 여러줄로 배치하기 위해 탄생한 속성입니다.
기본적인 컨셉은 컨테이너 내부에 행과 열을 스도쿠처럼 일정하게 나열하여 요소들을 배치합니다.
즉, 2차원 개념을 가지는 것이죠.

컨테이너 내부에 요소들을 배치한다는 점은 동일하다.

기본적인 grid layout

하나의 그리드는 일반적으로 columns, rows 로 구성된다.
각 행과 열 사이에 공백이 있는데 이를 gutters 라고 부른다.
❗️ 행과 열이 있는 레이아웃을 만드는데 더이상 table 을 사용하지 말자!

🦊 MDN Link - About grid

🧊 display: grid;

grid 는 CSS 문서에서 display 속성에 선언하여 사용한다.

내부 아이템 요소들의 배치를 지정하기 때문에, 컨테이너 요소에 선언한다.
만약 블록 컨테이너를 인라인 요소로 바꾸고 싶다면?
--> display 속성에 값이 할당되었다고 못하는 것이 아니다.
inline-grid 속성을 사용하자. 이는 flex 속성에서도 동일한 개념으로 쓰인다.

🧊 grid-template-rows
🧊 grid-template-columns

grid-template-rows||columns : 그리드의 행과 열에 따라 요소들의 크기를 설정한다.

행과 열을 원하는 개수만큼 나눌 때 사용한다.
컨테이너 내부에 아이템 유무와 상관없이 자리를 미리 할당하여 만든다.
나누고 싶은 행과 열 개수만큼 값을 준다.
ex) 열을 세 개로 나누고 싶을 때 = grid-template-columns: 50px 20em auto;
지정된 값보다 실제 행과 열이 더 많다면 나머지 요소들은 initial 로 적용된다.
숫자+fr 값을 주면 fraction 이라는 뜻이며, 숫자만큼의 비율을 갖게 된다.
--> 몇대 몇 형식으로 비율을 나눈다고 생각하자.

Example

grid-template-rows: 1fr 1fr 2fr
--> 세 개의 행을 1:1:2 비율로 분할한다.
grid-template-columns: repeat(4, 100px)
--> 네 개의 열을 100px 의 크기로 분할한다.
✅ repeat(반복횟수, 지정값) 함수도 사용 가능하다.

🦊 MDN Link - grid-template-rows
🦊 MDN Link - grid-template-columns

🧊 grid-template-areas

grid-template-areas : 요소가 컨테이너의 일정 부분을 차지하도록 설정한다.
일종의 땅따먹기 게임을 생각해보자.

컨테이너에 선언하는 속성이다.
각 아이템들의 모음은 사각형이어야 한다.
요소에게 grid-area 로 이름을 지정할 수 있다.
배정하고싶지 않은 위치는 . (점) 을 사용한다.

Example

/* 이름 지정 */
.header {
  grid-area: hd;
}
.main {
  grid-area: ma;
}
.sidebar {
  grid-area: sb;
}
.footer {
  grid-area: ft;
}

/* 공간 배정 */
.container {
  grid-template-areas:
    "hd hd hd hd hd"
    "ma ma ma sb sb"
    "ft ft ft ft ft";
}

🦊 MDN Link - grid-template-areas

🧊 row-gap
🧊 column-gap
🧊 gap (단축속성)

row-gap : 요소들의 행간 간격을 설정한다.
column-gap : 요소들의 열간 간격을 설정한다.
gap : 행 열 값의 순서로 간격을 설정한다.

grid-row-gap, grid-column-gap, grid-gap 으로도 사용 가능하다.
✅ 제목처럼 사용하는 것은 최신 명세이기 때문에 브라우저 버전에 따라 지원이 안될 수도 있다.
gap: 20px 50px 은 행간 20px, 열간 50px 의 간격을 지정한다.

🦊 MDN Link - (grid-)row-gap
🦊 MDN Link - (grid-)column-gap
🦊 MDN Link - (grid-)gap

🧊 grid-auto-rows
🧊 grid-auto-columns

grid 배치에서 벗어난 아이템 요소의 행과 열 크기를 설정한다.

grid-template-rows||columns 와 다른점?

template 은 명시적으로 미리 크기를 배정하지만,
auto 는 암시적으로 나중에 생길 아이템 요소의 크기를 설정해놓는다.

🦊 MDN Link - grid-auto-rows
🦊 MDN Link - grid-auto-columns

🧊 grid-auto-flow

grid-auto-flow : grid 요소들의 흐름을 지정한다.

Values

row (기본값) = 요소들이 행 방향으로 나열된다.
column = 요소들이 열 방향으로 나열된다.
dense = 요소들을 컨테이너에 빈 자리 없이 차지하게 한다.
✅ grid-auto-flow: 값 dense 처럼 값과 dense 를 사용하면
빈자리에 남은 요소들이 들어가게 된다.

🦊 MDN Link - grid-auto-flow

🧊 grid (단축속성)

grid : 위에서 다룬 그리드 속성들을 한줄로 작성할 수 있다.

외재적인 속성 (명시적인 속성) = template 들
grid-template-rows / grid-template-columns / grid-template-areas
내재적인 속성(암시적인 속성) = auto 들
grid-auto-rows / grid-auto-columns / grid-auto-flow
/ (슬래시) 를 기준으로 앞쪽은 row 값, 뒤쪽은 column 값을 사용한다.
ex) grid: auto-flow / 1fr 1fr 1fr;
✅ row 와 column 을 각각 명시적 또는 암시적으로 작성할 수 있다.

Example

1. 단축속성 사용법

grid-template-rows: 1fr 2fr;
grid-template-columns: 100px 200px;

/* 위 코드와 아래 코드는 동일하게 적용된다. */

grid: 1fr 2fr / 100px 200px;

2. grid-auto-flow 를 쓰고 싶을 때

/* row 와 column 중 적용하고싶은 곳에 auto-flow 를 넣는다. */

grid: auto-flow 1fr 2fr / 100px 200px;

🦊 MDN Link - grid

🧊 justify-content
🧊 align-content

컨테이너 내부 아이템 요소들의 배치를 설정할 수 있다.

justify-content =
flex (플렉스박스) 에서 사용했던 것과 동일한 값을 줄 수 있다.
열 방향으로 어떻게 정렬할지 결정한다.
align-content =
행 방향으로 어떻게 정렬할지 결정한다.

🦊 MDN Link - justify-content
🦊 MDN Link - align-content

🧊 justify-items
🧊 align-items
🧊 justify-self

하나의 아이템에 주어진 공간에서 배치를 설정할 수 있다.
content 보다 items 의 범위가 더 좁다고 생각하면 된다.

그리드 격자의 크기보다 내부 아이템의 크키가 작을 때 어느 방향으로 붙일지 결정한다.
justify-items 와 align-items 는 컨테이너 속성이다.
justify = 열 방향, align = 행 방향 이다.
justify-self 는 아이템에 선언하는 속성이다.
--> 자기 자신의 배치만 설정할 수 있다.

🦊 MDN Link - justify-items
🦊 MDN Link - align-items
🦊 MDN Link - justify-self

🧊 grid-row (단축속성)
🧊 grid-column (단축속성)

그리드 아이템 요소가 행과 열의 몇번째 줄까지 자리를 차지할지 설정한다.

그리드 줄을 기준으로 값을 설정한다.
❗️ 칸 기준이 아니라 줄 기준으로 숫자값을 매김을 주의하자!
명시적으로 지정된 그리드 아이템에게만 적용된다.
grid-row-start 와 grid-row-end 를 합쳐놓은 속성들이다.
/ (슬래시) 로 start / end 를 나누어 값을 설정한다.
✅ grid-row||column-start 와 grid-row||column-end 의 합성이다.
span 숫자 형식은 현재 위치부터 몇개의 줄까지 차지할지 결정한다.

Example

grid-row: 1 / 3 = 첫째줄부터 셋째줄까지의 행을 차지한다. (두 칸)
grid-column: 2 / sapn 3 = 둘째줄부터 그 다음 세번째줄까지의 열을 차지한다. (세 칸)

🦊 MDN Link - grid-row
🦊 MDN Link - grid-column

🧊 grid-area (단축 속성)

하나의 값만 지정하면 grid-template-areas 에서 사용 가능한 이름으로,
여러개 값을 지정하면 단축 속성이 된다.

하나의 값을 단어로 선언하면 해당 요소의 그리드 이름이 된다.
네 개의 값을 한줄에 선언할 수 있다.
순서대로 row-start / column-start / row-end / column-end 이다.

🦊 MDN Link - grid-area

🧊 order

order : 그리드 요소들의 순서를 변경한다.

숫자가 높을수록 더 높은 중요도를 가지며 앞쪽에 위치한다.
flex 에서 사용했던 방식과 완전히 동일하다.

🦊 MDN Link - order

🧊 z-index

z-index : z축 (화면으로부터 수직인 축) 에서의 우선순위를 설정한다.

숫자가 높을수록 더 높은 중요도를 가지며 화면에서 앞쪽에 위치한다.
일반적으로 알고 있는 z-index 와 사용법은 동일하다. 그리드 아이템에 선언해준다.
쌓임 순서를 고려하여 미리 설계 후 사용하는 것이 편하다.
--> 너무 큰값이나 작은값들을 미리 설정하면 헷갈릴 수 있다.

🦊 MDN Link - z-index

🧊 grid 의 단위들

grid 의 단위들에 대해 알아보자.

1. `fr`

fraction 이라고 부르며, 비율을 뜻한다.
절대길이와 함께 사용할수도 있다.
ex) 1fr 2fr 은 그리드 컨테이너 내에서의 1:2 비율을 의미한다.

2. `min-content`

영어를 기준으로, 아이템 내용의 단어를 잘리지 않을만큼 줄인다.

3. `max-content`

그리드 아이템을 내용에 따라 최대한 늘리고, 남은 공간을 나머지 아이템들이 차지한다.

🧊 repeat() 의 auto-fill, auto-fit

grid-template-columns: repeat(둘 중 하나, 100px);
일 때(고정 길이)

auto-fill : 컨테이너의 크기가 변경되면 빈자리에 아이템들을 배치한다.

auto-fit : 컨테이너를 늘릴 때 중간에 남는 공간이 생겨도 요소를 늘려 채운다.

Flex

💵 오늘을 살자

이전 포스트

CSS Flexbox 정리

다음 포스트

CSS grid 정리

CSS 모음

🧊 flex 대신 grid 를 쓰는 이유?

기본적인 grid layout

🧊 display: grid;

🧊 grid-template-rows
🧊 grid-template-columns

Example

🧊 grid-template-areas

Example

🧊 row-gap
🧊 column-gap
🧊 gap (단축속성)

🧊 grid-auto-rows
🧊 grid-auto-columns

grid-template-rows||columns 와 다른점?

🧊 grid-auto-flow

Values

🧊 grid (단축속성)

Example

1. 단축속성 사용법

2. grid-auto-flow 를 쓰고 싶을 때

🧊 justify-content
🧊 align-content

🧊 justify-items
🧊 align-items
🧊 justify-self

🧊 grid-row (단축속성)
🧊 grid-column (단축속성)

Example

🧊 grid-area (단축 속성)

🧊 order

🧊 z-index

🧊 grid 의 단위들

1. `fr`

2. `min-content`

3. `max-content`

🧊 repeat() 의 auto-fill, auto-fit

CSS Flexbox 정리

CSS 반응형 디자인에 대하여

0개의 댓글

관련 채용 정보

CSS grid 정리

CSS 모음

🧊 flex 대신 grid 를 쓰는 이유?

기본적인 grid layout

🧊 display: grid;

🧊 grid-template-rows🧊 grid-template-columns

Example

🧊 grid-template-areas

Example

🧊 row-gap🧊 column-gap🧊 gap (단축속성)

🧊 grid-auto-rows🧊 grid-auto-columns

grid-template-rows||columns 와 다른점?

🧊 grid-auto-flow

Values

🧊 grid (단축속성)

Example

1. 단축속성 사용법

2. grid-auto-flow 를 쓰고 싶을 때

🧊 justify-content🧊 align-content

🧊 justify-items🧊 align-items🧊 justify-self

🧊 grid-row (단축속성)🧊 grid-column (단축속성)

Example

🧊 grid-area (단축 속성)

🧊 order

🧊 z-index

🧊 grid 의 단위들

1. fr

2. min-content

3. max-content

🧊 repeat() 의 auto-fill, auto-fit

CSS Flexbox 정리

CSS 반응형 디자인에 대하여

0개의 댓글

관련 채용 정보

🧊 grid-template-rows
🧊 grid-template-columns

🧊 row-gap
🧊 column-gap
🧊 gap (단축속성)

🧊 grid-auto-rows
🧊 grid-auto-columns

🧊 justify-content
🧊 align-content

🧊 justify-items
🧊 align-items
🧊 justify-self

🧊 grid-row (단축속성)
🧊 grid-column (단축속성)

1. `fr`

2. `min-content`

3. `max-content`