CSS: Grid

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.

⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️

---

GRID ESSENTIALS

Introduction to Grids

CSS를 사용하면 웹 페이지에 요소를 적절하게 배치할 수 있다. .

표시하려는 컨텐츠에 따라 여러 가지 다른 기법이 잘 작동할 수 있다.

Box model과 Display and Positioning은 레이아웃의 몇 가지 가능한 방법을 설명한다.

 

이 과정에서는 CSS Grid라는 강력한 도구를 소개한다.

그리드를 사용하여 전체 웹 페이지를 레이아웃할 수 있다.

Flexbox는 대부분 1차원 레이아웃에서 항목을 배치하는 데 유용하지만,

CSS grid는 2차원 레이아웃에 가장 유용하며, 행과 열에 걸쳐 요소를 정렬하고 이동하기 위한 많은 도구를 제공한다.

• grid-template-columns
• grid-template-rows
• grid-template
• grid-template-are
• grid-gap
• grid-row-start / grid-row-end
• grid-column-start / grid-column-end
• grid-area

Creating a Grid

grid를 설정하려면 grid contianer와 grid items이 모두 있어야 한다.

grid container는 하위로 grid item을 포함하며 상위 구성요소가 되며, 상위 구성요소에 오버아치 스타일 및 위치 지정을 적용한다.

 

HTML 요소를 그리드 컨테이너(grid container)로 만들려면 요소의 display property을 다음 두 가지 값 중 하나로 설정해야 한다.

• grid: for a block-level grid
• inline-grid: for an inline grid

Creating Columns

기본적으로 그리드에는 하나의 열(column)만 포함된다.

item을 추가하려면 각 item이 새 행(row)에 배치된다.

이를 변경하려면 그리드의 행((row)과 열(column)의 수를 명시적으로 정의해야 한다.

 

CSS property grid-template-columns를 사용하여 그리드의 열을 정의할 수 있다.

다음은 이 속성의 작동 예시이다.

.grid {
  display: grid;
  width: 500px;
  grid-template-columns: 100px 200px;
}

이 property는 두 가지 변경 사항을 생성한다.

첫째, 그리드의 열 수를 정의한다; 이 경우 두 개가 있다.

둘째, 각 열의 너비를 설정한다.

첫 번째 열은 100픽셀 너비가 되고 두 번째 열은 200픽셀 너비가 된다.

 

또한 열의 크기를 전체 그리드 너비의 백분율로 정의할 수 있다.

.grid {
  display: grid;
  width: 1000px;
  grid-template-columns: 20% 50%;
}

이 예에서는 그리드의 너비가 1000픽셀이다.

따라서 첫 번째 열은 그리드 너비의 20%로 설정되었기 때문에 200픽셀 너비가 되고, 두 번째 열의 너비는 500픽셀이다.

 

이 두 유닛을 혼합하고 일치시킬 수 있다.

아래 예제에는 너비 20픽셀, 40픽셀 및 60픽셀의 세 열이 있다.

.grid {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 40% 60px;
}

이 예에서는 열의 총 너비(120픽셀)가 그리드 너비(100픽셀)를 초과한다.

이렇게 하면 그리드가 페이지의 다른 요소를 덮을 수 있다.

Creating Rows

행(row)의 수와 크기를 지정하기 위해 property grid-template-rows을 사용

 

이 property는 grid-tempalte-column과 거의 동일하다.

.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template-columns: 100px 200px;
  grid-template-rows: 10% 20% 600px;
}

이 그리드에는 두 개의 열과 세 개의 행이 있다.

grid-template-rows는 행의 수를 정의하고 각 행의 높이를 설정한다.

이 예제에서 첫 번째 행은 50픽셀 높이(500의 10%)이고, 두 번째 행은 100픽셀 높이(500의 20%)이며, 세 번째 행은 600픽셀 높이이다.

 

이 두 property에서 백분율을 사용할 때는 행을 그리드 높이(height)의 백분율로 정의하고 열을 너비(width)의 백분율로 정의해야 한다.

Grid Tempalte

shorthand property, grid-template는 grid-template-columns, grid-template-rows CSS property를 대체한다.

.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template: 200px 300px / 20% 10% 70%;
}

grid-template를 사용할 경우 슬래시 앞의 값에 따라 각 행의 크기가 결정되며, 슬래시 이후의 값에 따라 각 열의 크기가 결정된다.

 

이전과 동일한 규칙이 적용된다.

백분율을 사용하여 행을 설정할 때 각 행(row)은 그리드의 전체 높이(heignt)의 백분율이 된다.

열(column)은 전체 너비(width)의 백분율이다.

Fraction

CSS Grid는 fr(fraction)과 같은 새로운 relative sizing unit를 도입

 

fr 단위를 사용하면 열과 행의 크기를 그리드의 길이와 너비의 일부분으로 정의할 수 있다.

이 장치는 CSS grid에서 사용하기 위해 특별히 만들어졌다.

fr을 사용하면 grid item이 grid의 경계를 넘치지 않도록 쉽게 방지할 수 있다.

예시

.grid {
  display: grid;
  width: 1000px;
  height: 400px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;
}

이 예에서는 그리드에 행이 3개이고 열이 3개이다.

행은 사용 가능한 400픽셀의 높이를 네 부분으로 나누고 있습니다.

첫 번째 행에는 두 개의 부분이 있고, 두 번째 행에는 한 개가 있고, 세 번째 행에는 한 개가 있다.

따라서 첫 번째 행은 200픽셀이고 두 번째 행과 세 번째 행은 100픽셀이다.

 

각 열의 너비는 사용 가능한 공간의 일부이다.

이 경우 사용 가능한 공간이 다섯 부분으로 분할된다.

첫 번째 열은 공간의 1/5을 얻고, 두 번째 열은 3/5을 얻으며, 마지막 열은 1/5을 얻습니다.

총 너비가 1000픽셀이므로 열의 너비는 각각 200픽셀, 600픽셀, 200픽셀이다.

 

fr을 다른 장치와 함께 사용할 수도 있다.

이 경우 각 fr은 사용 가능한 공간의 일부분을 나타낸다.

.grid {
  display: grid;
  width: 100px;
  grid-template-columns: 1fr 60px 1fr;
}

이 예에서는 두 번째 열이 60픽셀을 차지한다.

따라서 첫 번째 열과 세 번째 열은 40개로 분할하며, 각각은 전체 중 한 부분을 차지하기 때문에 둘 다 20픽셀의 너비가 된다.

Repeat

그리드의 행과 열 수를 정의하는 property는 함수를 value로 사용할 수 있다.

repeat()은 이러한 기능 중 하나이다.

repeat() 함수는 CSS grid를 위해 특별히 만들어졌다.

.grid {
  display: grid;
  width: 300px;
  grid-template-columns: repeat(3, 100px);
}

반복 함수는 행 또는 열에 대한 규격을 지정된 횟수만큼 복제한다.

위의 예에서 반복 기능을 사용하면 그리드에 각각 100픽셀의 너비가 되는 3개의 열이 생성된다.

이는 다음과 같다.

grid-template-columns: 100px 100px 100px;

반복은 특히 fr과 함께 유용하다.

예를 들어, repeat(5, 1fr)은 테이블을 다섯 개의 동일한 행 또는 열로 분할한다.

 

마지막으로, repeat()의 두 번째 매개 변수는 여러 값을 가질 수 있다.

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

이 코드는 첫 번째 및 세 번째 열의 너비가 20픽셀이고 두 번째 및 네 번째 열의 너비가 50픽셀인 네 개의 열을 만든다. 

minmax

웹 브라우저의 크기에 따라 그리드의 크기를 조정할 수 있다.

 

이러한 경우 행이나 열이 너무 크거나 너무 작아지는 것을 방지할 수 있다.

minmax() 함수를 통해 이미지의 최대 또는 최소 픽셀수를 지정한다.

.grid {
  display: grid;
  grid-template-columns: 100px minmax(100px, 500px) 100px;
}

이 예제에서 첫 번째 및 세 번째 열은 그리드 크기에 관계없이 항상 100픽셀 너비가 된다.

그러나 두 번째 열은 전체 그리드 크기에 따라 크기가 달라진다.

두 번째 열은 항상 100 픽셀에서 500 픽셀 사이이다.

Grid Gap

지금까지 모든 grid에서 grid의 item 사이에 공간이 없었다.

CSS property grid-row-gap과 grid-column-gap은 grid의 모든 행과 열 사이에 공백을 삽입한다.

.grid {
  display: grid;
  width: 320px;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
}

그리드 간격 property는 그리드의 시작 또는 끝에 공간을 추가하지 않는다는 점에 유의

예제 코드에서, 그리드는 두 개의 10픽셀 간격이 있는 세 개의 열을 가진다.

 

fr을 사용하면 사용 가능한 모든 공간이 고려된다는 점을 기억해야한다.

그리드의 너비는 320px이고 그 중 20픽셀은 두 개의 grid gap에 의해 차지된다.

따라서 각 열은 사용 가능한 300픽셀의 일부를 차지한다.

각 열은 1fr이 되므로 열은 세 개(또는 각각 100픽셀)로 균등하게 나뉜다.

 

마지막으로, 행과 열 간격을 동시에 설정할 수 있는 shorthand CSS property grid-gap이 있다.

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

위의 예에서는 행 사이의 간격을 20픽셀로, 열 사이의 거리를 10픽셀로 설정한다.

다른 CSS grid property와는 달리 이 shorthand는 값 사이에 /를 사용하지 않는다.

값이 하나만 지정된 경우 열 간격과 행 간격은 해당 값으로 설정된다.

Grid Items

이 과정에서는 grid container를 정의하는 방법에 대해 배웠다.

grid를 명시적으로 정의할 때는 행과 열의 양과 해당 크기를 선언해야 한다.

모든 예시에서 grid에 배치된 항목은 항상 정확히 하나의 정사각형을 차지했다.

항상 그럴 필요는 없다.

grid item이 두 행과 열 두 개 이상을 차지하도록 함으로써 그리드의 모양을 크게 변경할 수 있다.

다이어그램에서 이를 확인할 수 있다.

A, B, C, E 항목은 둘 이상의 행에 걸쳐 있다.

CSS grid diagram/ 출처: https://content.codecademy.com/courses/learn-css-grid/lesson-i/css_grid_diagram_2.svg

Multiple Row Items

CSS property를 grid-row-start 및 grid-row-end를 사용하여 단일 grid item이 여러 행을 차지하도록 한다.

더 이상 외부 grid container에 CSS를 적용하지 않고 grid 안에 있는 요소에 CSS를 추가한다.

.item {
  grid-row-start: 1;
  grid-row-end: 3;
}

이 예에서, class item의 HTML 요소는 grid에서 1행과 2행의 두 행을 차지한다.

grid-row-start 및 grid-row-end가 허용하는 값은 grid lines이다.

 

row grid lines와 column grid lines은 1에서 시작하여 그리드에 있는 행 또는 열 수보다 1 큰 값으로 끝난다.

예를 들어 그리드에 행이 5개 있는 경우 grid row line의 범위는 1부터 6까지이다.

그리드에 행이 8개인 경우 grid row line의 범위는 1부터 9까지이다.

 

grid-row-start는 grid item을 시작할 행이어야 한다.

grid-row-end 값은 grid item을 종료할 행보다 커야 한다.

2, 3, 4행을 포함하는 요소는 다음과 같은 선언을 가져야 한다; grid-row-start: 2, grid-row-end-: 5

 

grid-row-start의 값이 grid-row-end의 값보다 클 수 있다.

두 property 모두 음수 값을 가질 수도 있다.

이러한 기능을 사용하는 방법에 대한 자세한 내용은 documentation를 참조

Grid Row

grid-row-start 및 grid-row-end의 shorthand로 property grid-row을 사용

다음 두 개의 코드 블록이 동일한 출력을 생성한다.

.item {
  grid-row-start: 4;
  grid-row-end: 6;
}

.item {
  grid-row: 4 / 6;
}

이 코드는 grid-template이 grid-template-rows 및 grid-template-columns에 대한 shorthand 방식과 유사하다.

이 경우 시작 행은 "/" 앞에 가고 끝 행은 "/" 뒤에 간다.

 

item이 이러한 property를 사용하여 여러 행 또는 열에 걸쳐 있는 경우 grid-gap도 포함된다.

예를 들어, item이 높이 100픽셀의 두 행에 걸쳐 있고 10픽셀 grid-gap이 있는 경우 항목의 총 높이는 210픽셀이다.

Grid Column

grid-column-start, grid-column-end 및 grid-column이 row. property외 동일하게 작동한다.

이러한 property를 통해 grid item이 여러 열에 걸쳐 있을 수 있다.

 

이러한 property를 사용할 때 키워드 span를 사용하여 열 또는 행의 다른 끝과 비교하여 열 또는 행을 시작하거나 종료할 수 있다.

아래의 코드에서 span이 어떻게 사용되는지 살펴보자.

.item {
  grid-column: 4 / span 2;
}

이것은 item 요소가 4열에서 시작하여 두 열의 공간을 차지하도록 지시하는 것이다.

그래서 item은 4열과 5열을 차지하게 된다.

다음 코드 블록과 동일한 결과를 생성한다.

.item {
  grid-column: 4 / 6;
}

.item {
  grid-column-start: 4;
  grid-column-end: span 2;
}

.item {
  grid-column-start: span 2;
  grid-column-end: 6;
}

span은 요소의 ending grid line을 결정할 때 만들 수 있는 off-by-one error(ending grid line 계산)를 방지하기 때문에 유용한 키워드이다.

grid item을 시작할 위치와 길이를 알고 있는 경우 span을 사용하자.

Grid Area

grid-row와 grid-column을 grid-row-start와 grid-row-end과 같은 shorthand로 사용할 수 있다.

우리는 property grid-area를 사용하여 훨씬 더 많이 리팩터링할 수 있다.

이 property는 item의 행과 열에 대한 시작 및 끝 위치를 설정한다.

.item {
  grid-area: 2 / 3 / 4 / span 5;
}

그리드 영역은 슬래시로 구분된 4개의 값을 취한다.

순서가 중요하며, grid-area가 이러한 값을 해석하는 방법이다.

1. grid-row-start
2. grid-column-start
3. grid-row-end
4. grid-column-end

위의 예제에서 항목은 행 2와 행 3과 열 3에서 열 8까지를 차지한다.

grid-area를 사용하면 그리드에 원하는 위치에 항목을 쉽게 배치할 수 있다.

---

참고

• https://www.codecademy.com/learn/paths/front-end-engineer-career-path/tracks/fecp-making-a-website-responsive/modules/fecp-learn-css-grid/cheatsheet

Making a Website Responsive: Learn CSS: Grid Cheatsheet | Codecademy

• https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start

grid-row-start - CSS: Cascading Style Sheets | MDN