grid

flex로는 격자 레이아웃을 만들기 어렵기 때문에 grid 레이아웃을 활용한다.
grid도 flex와 마찬가지로 container에서 속성을 부여한다.

display: grid;
grid-template-columns: 20px 55px 90px 100px;
grid-template-rows: repeat(4, 200px); // 200px 200px 200px 200px;

gap

MDN 문서
column-gap (가로간격) 와 row-gap (세로간격)의 단축 속성으로, 행과 열 사이의 간격을 설정합니다.

template

grid 너비 지정: grid-template-columns

• grid-template-columns : grid에서 열의 line이름 및 열의 크기를 정의합니다.

grid 높이 지정: grid-template-rows

• grid-template-rows : grid에서 행의 line이름 및 행의 크기를 정의합니다.

grid 영역 지정: grid-template-areas

.class-name {
  display: grid;
  grid-template-areas: 
  "header header header header"
  "content content content nav"
  "content content content nav"
  "footer footer footer footer";
}

.header {
  grid-area: header;
}

.content {
  grid-area: content;
}

.nav {
  grid-area: nav;
}

.footer {
  grid-area: footer;
}

grid-template-areas로 사용하려면 grid-area 으로 이름을 지정해줘야 한다.
단, 속성값을 string으로 지정하면 안된다.
한편, 속성값을 grid-template-areas: .이라고 하면 빈 공간이 만들어진다.

시작점과 끝점을 지정해서 위치 지정

column line → 가로

• grid-column-start
• grid-column-end

row line → 세로

• grid-row-start
• grid-row-end

grid-column-start: 1;
grid-column-end: 2;

1번째 세로선에서 시작하고, 2번째 세로선에서 끝난다.
다만, 여기서 주의해야 할 것이 일반적으로 생각하는 행열보다는 구분선을 말하는 것이기 때문에
위에서 말한 1번째 세로선에서 시작하고, 2번째 세로선에서 끝난다.는 것은 첫번째 열만을 가리킨다.

반대로 아래와 같은 css 속성을 부여하면, 2번째, 3번째 행을 가리키는 것이다.

grid-row-start: 2;
grid-row-end: 4;

단축속성

grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 4;

위처럼 4줄에 걸쳐 작성한 것을 아래와 같이 단축속성으로 나타낼 수 있다.

grid-column: 1/2;
grid-row: 2/4;

n번째줄부터 마지막줄까지

1번째줄부터 5번째줄까지 라고 line 수를 적는것보다는 첫번째줄부터 마지막줄까지라고 시작과 끝을 적는 것이 더 편할 것 같다.

시작부터 끝 : grid-column: 1/-1;
반대로 -2, -3이라고도 표현할 수도 있다.

span: size나타내기

시작과 끝 대신, 얼마나 많은 cell을 가지는지 표현하는 span도 있다.

grid-column: span 4;

위와 같은 속성은 4개의 cell을 가진다는 뜻이다.
대신 처음부터가 아니라 중간부터 4개의 cell을 차지한다고 적으려면 시작점도 적어줘야 한다.

grid-column: 2 / span 2;

line naming

말 그대로 line에 이름을 붙인다.
니꼬는 활용을 거의 하지 않는다 한다.

grid-template-column: [first-line] 100px [second-line] 100px [third-line] 100px [fourth-line] 100px;

// 활용
grid-column: first-line / fourth-line;

한편 동일한 사이즈를 지정하려면 repeat() 메서드를 활용해도 된다.

grid-template-column: repeat(4, 100px, [fantastic-line]);

이렇게 네이밍을 하게 되면
첫번째 줄은 이름을 가지지 못하고, 나머지 3개의 줄 모두 fantastic-line이라는 이름을 가지게 된다.

100px // [fantastic-line] 100px // [fantastic-line] 100px // [fantastic-line] 100px // [fantastic-line]

fr: fraction

grid에서 사용가능한 공간을 말합니다.

만약 아래와 같은 레이아웃에서 1fr = (500-30)/4px를 말합니다.

display: grid;
width: 500px;
grid-template-columns: repeat(4, 1fr);
gap: 10px;

grid-template-areas

grid-template-areas는 grid-area의 이름을 사용합니다.
row를 먼저 적고 슬래시 / 다음에 각 column의 너비를 구체적으로 지정합니다.
이렇게 템플릿을 지정하면 화면의 크기가 변해도 형태는 유지되는 장점을 가집니다.

grid-template:
"header header header header" 1fr // row의 높이
"content content content nav" 2fr
"footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr; // 각 column의 너비

grid-line naming

거의 사용하지 않습니다.

grid-template:
[header-start] "header header header header" 1fr [header-end] // row의 높이
[content-start]"content content content nav" 2fr [content-end]
[footer-start]"footer footer footer footer" 1fr [footer-end] / 1fr 1fr 1fr 1fr; // 각 column의 너비

justify-item & align-items

기본적으로 grid container가 가지는 속성으로 기본값은 stretch입니다.
stretch는 grid-container가 grid를 가지고 있고 grid를 늘려서 채우도록 합니다.
align-items도 마찬가지입니다.

justify-items 및 align-items가 start, center, end 중 하나의 속성값을 가질 때
해당 grid item에 contents가 없다면 기본 너비와 높이는 없기 때문에 화면에 나타나지 않습니다.

place-items

align-items와 justisy-items의 속성을 합쳤습니다.

place-items: stretch / center;

align-items: stretch;
justify-items: center;

2.9강 이어서