Grid

Grid

⭐ Flex가 1차원적인 레이아웃을 정의한다면, Grid는 2차원적인 레이아웃을 정의한다.

그리드는 행(column)과 열(row)로 이루어진 표를 구성하는 것과 같으며, 다양한 그리드 속성을 이용해 표를 커스텀마이징 할 수 있다.

Grid 구성요소

grid

• Container : 그리드의 전체 영역
• Track : 행/열
• Line : (셀의) 구분선
• Number : Line의 번호
• Cell : 나누어진 하나의 칸
• Item : Cell 내부의 요소, grid 규칙에 의해 정렬
• Gap : Cell과 Cell 혹은 Cell과 Container 사이 간격
• Area : Cell의 집합.

Grid 속성

• grid-template-rows (columns) : 트랙(track)의 크기(개수)를 지정해주는 속성
  ex) grid-template-rows : 50px 50px 50px

🔍 그리드에서 사용되는 요소 1fr은 1:1 비율을 뜻한다. 예를 들어 grid-template-rows : 1fr 1fr 1fr이라면, 트랙을 1:1:1 비율의 셀로 나눈다는 것이다.

🔍 속성에서 연속된 요소를 지정할때, 간단하게 축약하는 방법이 있다. repeat함수는 1fr 1fr 1fr 대신에 repeat(3, 1fr)로 작성할 수 있다. repeat(횟수, 요소)

🔍 minmax함수는 최소최대 크기를 한번에 지정할 수 있도록 해준다. minmax(10px, 200px)는 최소 10px부터 최대 200px까지의 크기변화에 대한 범위를 지정해 줄 수 있다. auto 사용가능.

🔍
auto-fill : 트랙 내부의 셀 개수를 확정하지 않았을때, 대신 사용할 수 있다. repeat(auto-fill, 100px)로 지정 한다고 가정 했을때, 100px 크기의 셀이 포함될 수 있는 최대치까지 생성된다.
auto-fit: auto-fill로 채워진 트랙에 남는 공간이 존재한다면, 자동적으로 매꾸게 해주는 속성이다. 예를 들어, 900px의 트랙에 200px셀을 auto-fill을 적용한다면 총 4개의 셀과 100px의 공간이 남게 되는데 해당 공백을 각 셀이 같은 비율로 늘어나 채우게 된다.

• gap, row(column)-gap : 해당 셀/트랙의 간격 지정.

• grid-auto-columns(rows) :

• grid-row(column)-start(end, ) : 그리드 아이템에 적용하는 속성으로서, 간단히 셀의 크기를 지정하는 것이다.
  ex) grid-row-start : 3; grid-row-end : 6;
  (grid-line 3번 부터 6번까지의 영역을 하나의 셀이 차지.)

✨
grid-row-start:3;,grid-row-end:6; 두 가지의 속성을
grid-row:3/span6로 하나로 축약하여 작성할 수 있다.

• grid-template-areas : 영역에 이름 붙이기. 셀의 영역을 넓힌 상태라고 하더라도, 각 셀이 가지는 영역에 모두 이름을 붙여줘야 한다.
  ex) 3x3 형태라고 가정한다면,
  "A A A"
  "x B x"
  "C C C"

• grid-auto-flow : 아이템이 자동으로 배치되는 흐름.

  • row : 열(상단)정렬
  • column : 행(좌측)정렬
  • dence : 빈 공간 채우기 -> 공간을 채우기 위해 행/열의 위치, 순서를 무시.
  • row dence : 상단 + dence
  • column dence : 좌측 + dence

그외 속성

• align(justify)-items : 아이템 세로축(가로축)방향 정렬.

  • place-items : align + justify (한번에 정의)
    ex) place-items : center center;

• align(justify)-contents : 그룹 세로축(가로축)방향 정렬.

  • place-contents : align + justify (한번에 정의)
    ex) place-contents : center center;

• align(justify)-self : 개별 세로축(가로축)방향 정렬.

  • place-self : align + justify (한번에 정의)
    ex) place-self : center center;

• order : HTML과는 상관없이 화면상에서 시각적으로만 위치를 변경할 수 있는 속성. 하지만, 웹접근성과는 거리가 멀기 때문에 굳이 사용할 이유는 없다.

end

여러 웹사이트를 리뷰할 때도 grid보다는 flex를 많이 사용하는 것을 볼수 있다. grid는 2차원적인 레이아웃을 정의할 수 있는 기술인데 왜 flex를 선호할까? IE에서 grid를 지원하지 않기 때문에 사용을 꺼려한다는 의견이 있다. 하지만, 오래된 버전을 지원할 수 있는 해결책도 있기 때문에 절대적 이유가 되지는 않는 다고 생각된다. 하나의 템플릿을 만들기보다는 flex+기본 HTML구성을 사용하여 다양한 구조를 만들는것이 더 편하기 때문(?)이라고 개인적으로 생각해본다.

현재 styled-component를 이용하여 개발을 진행중인데, flex를 사용한다면 1차원적인 레이아웃을 컴포넌트에 적용하여 여러개의 flex컴포넌트 구조를 통해 2차원적인 레이아웃을 구성하였지만, grid를 사용한다면 이를 어떻게 효율적으로 접합하여 개발을 할 수 있을지 고민해봐야겠다. 당연하게도 검색만 해도 여러 정보들이 우수수 쏟아지겠지만, 먼저 나의 생각을 통해 학습+테스트 해보고 미흡한 부분을 개선해나가는 방법으로 학습하고자 한다.

잘못된 부분 및 추가사항이있다면 언제나 업데이트 하겠습니다.
⭐🔍🔔📌✨