grid

 

오늘은 레이아웃하면 플렉스와 함께 빠질 수 없는 그리드에 대해 알아볼 것이다. 그리드는 플렉스와 매우 유사한 부분이 많은 레이아웃이다. 그러나 플렉스는 1차원 레이아웃이고, 그리드는 2차원 레이아웃이라는 점이 가장 큰 차이점이다.  이것은 무엇을 의미하는지를 이해하는 것이 이번 글의 주요 포인트이다. 

 

 

그리드?

---

• 플렉스는 수직 수평 중 한 방향을 선택해서 레이아웃을 만들 수 있지만, 그리드는 양 방향 모두 한 번에 만들 수 있다.

플렉스와 그리드의 차이

• 이전에 만든 계산기에서도 알 수 있듯이 만약 플렉스가 그리드처럼 수직,수평 모두를 정렬하려면 플렉스 안에 새로운 플랙스를 중첩해서 사용해야 한다.

2023.02.17 - [실습] - 계산기 목업 만들기

계산기 목업 만들기

• 이 때문에 수정할 경우 일일이 수치를 조절해야 하기에 한 번에 관리할 수 있는 그리드는 코드가 꼬일 걱정을 하지 않고 쉽게 관리가능하다.
• 단, 플렉스와 유사한 부분도 존재하기에 주요 속성명등을 공유하고 있다. 따라서 이전 flex글을 먼저 읽고 오는 것이 도움이 될 것이다.

2023.02.16 - [코딩/css] - flex

flex

 

 

그리드의 주요 용어

---

• 그리드 컨테이너 (Grid Container):
  Grid의 전체 영역. Grid 컨테이너 안의 요소들이 Grid 규칙의 영향을 받아 정렬
• 그리드 아이템 (Grid Item):
  Grid 컨테이너의 자식 요소들.  Grid 규칙에 의해 배치되는 요소
• 그리드 트랙 (Grid Track):
  Grid의 행 또는 열
• 그리드 셀 (Grid Cell):
  Grid의 한 칸.  Grid 아이템 하나가 들어가는 가상의 칸
• 그리드 라인(Grid Line):
  Grid 셀을 구분하는 선.
• 그리드 번호(Grid Number):
  Grid 라인의 각 번호.
• 그리드 갭(Grid Gap):
  Grid 셀 사이의 간격.
• 그리드 영역(Grid Area):
  Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합.

플렉스 때와 같이 부모, 자식을 의미하는 그리드 컨테이너와 아이템이 존재한다. 따라서 이번에도 컨테이너와 아이템에 사용되는 속성으로 나누어 설명할 것이다.

 

그리드 예제

---

<div class="container">
      <div class="item">a</div>
      <div class="item">b</div>
      <div class="item">c</div>
      <div class="item">d</div>
      <div class="item">e</div>
      <div class="item">f</div>
      <div class="item">g</div>
      <div class="item">h</div>
      <div class="item">i</div>
</div>

이번 시간의 예제는 모두 위의 html으로 진행할 것이며, html의 class명이나 값등은 변경되지 않을 것이다. 참고로 초기화 작업을 거쳤기에 리스트를 구분하는 머리표가 보이지 않는다.

 

 

 grid-template-columns, rows

---

• 그리드의 시작은 플렉스와 동일하게 display:grid를 넣는 것으로 시작한다.
• 행과 열 트랙 내 아이템의 크기를 지정하는 속성. 또 행과 열의 개수도 지정 가능.
• auto를 넣으면 자동으로 남은 공간을 차지하도록 크기 조절

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;//1:1:1 비율로 3개의 column을 만듦. 
grid-template-rows:100px 2fr 1fr //첫번째는 100px로 고정하고 나머지 공간을 2:1로 나눔
}
//fr은 사용할 수 있는 공간을 비율로 나눔을 의미.

행=1:1:1 , 열= 100px:2:1

 

repeat, minmax, auto-fill , auto-fit:

---

• repeat와 minmax은 grid-template와 함께 사용가능한 트랙 관련 함수
• repeat는 반복되는 값을 자동으로 처리할 수 있는 함수
• minmax은 최솟값과 최댓값을 각각 지정할 수 있는 함수

.container {
  display: grid;
    grid-template-columns: repeat(3, 1fr);//1fr 1fr 1fr 
  grid-template-rows: repeat(3, minmax(50px, 150px));//최소 50px,최대 150px
}

최대 화면에서는 150px

최소화면에서는 50px

• auto-fill & auto-fit은 반응형을 고려해 사용할 수 있는 키워드들. fill은 빈 공간이 있으면 남기고, fit는 빈 공간만큼 늘어난다.

  grid-template-columns: repeat(auto-fill, minmax(100px, auto));

빈 공간 존재

 

  grid-template-columns: repeat(auto-fit, minmax(100px, auto));

빈 공간 없음

 

gap

---

• 아이템 사이의 간격을 지정. row-gap과 columns-gap으로 나눠서 지정할 수 있다.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, auto));
  gap: 10px 20px;
}

 

grid-auto-columns, rows

---

• 암시적으로 행과 열의 크기를 지정.
• 행과 열의 개수를 미리 알 수 없는 경우에 사용.

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

 

 

align, justify-items, self, content

---

• 그리드의 배치를 담당하는 속성들.
• 기본적으로 flex와 동일하므로 flex참고

2023.02.16 - [코딩/css] - flex

flex

• items, self과 셀프의 차이는 일괄 적용이냐 개별적용이냐의 차이. items는 컨테이너에서, self는 아이템에서 사용
• align, justify는 place이라는 단축 속성으로 한 번에 행렬의 배치가 가능. self와 items 둘 다 사용가능
• items은 트랙 안에서, content는 컨테이너 안에서 사용.

justify-items:center

justify-content:center

 

 

grid-column, row

---

• Grid 아이템에 적용하는 속성으로, 각 셀의 영역을 지정.
• grid-column-start와 end로 나누어 쓸 수 있지만 grid-column: 시작 / 끝의 형태가 더 간결하여 쓰기 쉬움
• 단순히 시작과 끝을 지정하는 것뿐만 아니라 각 영역이 몇 개의 셀을 차지하게 할 것인지를 표현할 수 도 있다.

.item:nth-child(1) {
/* 1번 라인에서 3번 라인까지 */
	grid-column: 1 / 3;
	/* 1번 라인에서 2칸 */
	grid-row: 1 / span 2;
}

• 한 칸 사용할 경우 시작지점만 입력하면 된다.  

 

grid-auto-flow

---

• 아이템이 자동 배치되는 흐름을 결정하는 속성. 
• row, column, dense, row dense, column dense 등으로 설정 가능하다. 이중, dense는 빈 공간을 우선적으로 채우는 속성이고, row, column을

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25%, auto));
  grid-template-rows: repeat(5, minmax(50px, auto));
  grid-auto-flow: column;//row, dense
}
.item:nth-child(2) {
  grid-column: auto / span 3;
}
.item:nth-child(5) {
  grid-column: auto / span 3;
}
.item:nth-child(7) {
  grid-column: auto / span 2;
}

grid-auto-flow: column

grid-auto-flow: row

 

grid-auto-flow: dense

 

 

grid-template-areas

---

• 각 영역에 이름을 붙이고, 그 이름을 통해 배치하는 방법 
• 직관적으로 레이아웃의 형태를 만들 수 있어 웹페이지의 구조 만드는 데 도움이 됨
•  grid-template-areas은 배치형태를 의미하며 컨테이너에 정의, grid-area은 영역에 이름을 붙이는 용도로 아이템에서 사용.
• grid-template-areas의 행렬을 만들 때, 각 행렬의 개수가 맞지 않으면 제대로 실행되지 않기에.으로 공백칸을 표현

.container {
  display: grid;

  grid-template-areas:
    "a a ."
    "b . c"
    "d d c"
    "e e e";
}

.item:nth-child(1) {
  grid-area: a;
}
.item:nth-child(2) {
  grid-area: b;
}
.item:nth-child(3) {
  grid-area: c;
}
.item:nth-child(4) {
  grid-area: d;
}
.item:nth-child(5) {
  grid-area: e;
}

grid-template-areas으로 구현한 웹사이트의 레이아웃

.container {
	grid-template-areas:
		"header header header"
		"   a    main    b   "
		"   .     .      .   "
		"footer footer footer";
}