[CSS] 화면 레이아웃 잡기 (feat. grid-template-x)

이 포스팅의 배경 :
부끄럽지만, 화면 레이아웃을 flex로만 때우곤 했다. 그러나 동일한 레이아웃의 화면간 이동을 할 때 레이아웃이 크게 흔들린 경험이 있었고, 완성도가 좋지 못하다는 생각을 했다. 물론 flex로도 이를 해결할 수 있지만, 레이아웃 잡으라고 만든 grid 속성을 이제는 제때 잘 사용해봐야겠다는 생각이 들어 grid 기본에 대해 정리해본다.

요약 *(column은 row로도 가능)
ESSENTIAL : grid, grid-template-columns(또는 rows)
BASIC : grid-column-start, grid-column-end 또는 grid-column
LEVELUP : grid-area

예시 코드 : https://codepen.io/namnameeroo/pen/MYgMKXx?editors=0110

 

상위 요소에 필요한 속성

.container {
  display: grid;
  grid-template-columns: (생략);
  grid-template-rows: (생략);
}

grid-template-columns : 세로 영역을 나누기 위함
grid-template-rows : 행으로 가로 영역을 나누기 위함
필요한 속성을 선택해 지정하면 된다.

값으로는 정말 다양한 형식과 단위를 가진다.
단위 : %, fr, ch, px 등
형식 : 나눌 영역만큼 공백으로 구분해서 크기를 지정
예시 : grid-template-columns : '30% 40% 30%' 가운데가 조금 더 넓은 세 영역으로 분할된다.

 

하위 요소에 필요한 속성

속성명

case1. grid-column-start, grid-column-end 속성을 사용해 시작과 끝의 order값을 가지도록 함
case2. grid-colum, grid-row 으로 start, end 값을 한 줄에 표현할 수 있다.

값의 표현

• 1,2,3 같은 수 : 첫번째 영역, 두번째 영역, 세번째 영역
• span 2 : 길이 2의 영역

.body-card {
	grid-column-start: 1;
	grid-column-end: 3;
}

  /* 첫번째 세로 영역부터 세번째 이전 영역(두번째)까지를 가지겠다. */

.body-card {
	grid-column: 1 / 3;
  /* (위와 동일) 첫번째 세로 영역부터 세번째 이전 영역(두번째)까지를 가지겠다. */

	grid-column: 1 / span 2;
  /* 끝나는 위치가 아니라 길이를 기준으로 span으로 표현할 수도 있음 */
  }

grid-column-start, grid-column-end 두 속성으로 표현하던 것을 grid-column 하나로 한줄에 표현할수 있다.
나아가 grid-column, grid-row로 각각 행 열을 따로 속성을 적어서 표현하던 것을 grid-area로 슬래시(/)로 구분한 한 줄로 표현할 수 있다.

/* 1 */
   grid-row-start: 2;
   grid-row-end: 5;
   grid-column-start: 1;
   grid-column-end: 3;

/* 2 */
   grid-row: 2 / 5;
   grid-row-end: 1 / 3;

/* 3 */
    grid-area : 2 / 1 / 5 / 3;
    /* row-start, col-start, row-end, col-end 순서다*/

1,2,3 은 같다!

 

상위요소에서 쓰이는 grid-template-rows, grid-template-columns 또한 grid-template을 이용해 한 줄로 표현할 수 있다.

/* 1 */
.container {
    grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 50% 50%;
}


/* 2 */
.container {
      grid-template : 1fr 1fr 1fr / 50% 50%;
}

1과 2는 같다!

 

값의 압축적인 표현 (repeat, 동일 크기의 반복)

상위 속성명에 grid-template-rows나 grid-template-columns 에 동일한 값의 반복으로 영역을 지정해야한다고 해보자. 예를 들어 10개의 열을 가지는 영역으로 레이아웃을 쪼갠다고 할 때, grid-template-columns : 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%; 으로 표현할 수 있다.
이를 효율적으로 표시하기 위해 repeat을 사용할 수 있다.

grid-template-columns : repeat(10, 10%);
즉, repeat(반복횟수, 크기)로 표현한다.

fr의 사용

10% 단위를 사용하면 나눠야하는 영역의 수가 늘어날 때마다 합이 100인지 확인해야 하는 번거로움이 있다. fr 단위를 사용하면 화면에서 사용하는 영역을 fr로 쓴 만큼으로 등분해서 할당한다. 예를 들어 '1fr 1fr 1fr' 로 썼다면 전체 화면을 3등분한 영역 3개로 나뉜다. 또 '1fr 3fr 1fr'로 표현하면, 전체를 5등분해서 각각 1/5사이즈, 3/5사이즈, 1/5사이즈의 3개 영역으로 나눈다.

Next step

영역을 표시하는 단위인 fr, ch 등

직접 연습해보기

https://cssgridgarden.com/#ko
https://codepen.io/namnameeroo/pen/MYgMKXx

 

 

참고 링크

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template

https://parkej32.github.io/markup/2020/03/09/css-01/