Grid 만들기 / grid area와 span 활용

Flexbox에 관한 내용 이후 다루는 것은 grid 이다. 

 

flex와 유사한 문법구조를 가지고 있다. 

 

 grid를 설정하려면 flex와 비슷하게 display: grid; 혹은 display: inline-gird; 로 표현하면된다. 

기본적으로 grid는 1개의 column을 가지고있다. 새로운 아이템을 추가할 때마다 새로운 row가 생성되게 된다. 그렇지만 이렇게 하면 당연히 공간이 부족하기 마련이고, 따라서 우리는 row와 column을 몇개로 할 것인지 지정을 해줘야만한다. 

 

column과 관련된 명령어 

 

grid-template-columns 를활용하면 column의 갯수와 , 너비를 결정할 수 있다. 

grid-template-columns: 100px 200px ;

 위의 예시를 보면 100px 너비의 열(column)하나, 200px의 열 하나 해서 총 2개의 열을 생성시키라는 명령어이다. 

 

 px혹은 %를 단위로 받을 수 있고, 혼합하여 사용하는 것도 가능하다. 

 

 

Row와 관련된 명령어 

grid-template-rows

 

 위 column 생성과 유사하지만, 차이점은 이 명령어는 row을 생성하고, 그렇기 때문에 높이를 조절한다는 점이다. 

  grid-template-columns: 100px 200px;
  grid-template-rows: 10% 20% 600px;

 위 예시의 경우 2개의 column을 가지고 3의 row를 가진 grid가 될 것이다. 

 위 column과 row의 높이 및 너비의 경우 그것이 속한 grid-container의 높이와 너비를 기준으로 설정된다. 

 

 

Grid-template

 위 두가지를 한 줄로 표현할 수 있는 축약형 표현이 바로 grid-template 이다.  

  grid-template: 200px 300px / 20% 10% 70%;

 위와 같은 방식으로 작성하고, 슬래시(/)이전에 나오는 부분이 row의 높이를 결정하고 이후에 나오는 부분이 column의 너비를 결정한다. 

 

Fraction

 em rm %와 같이 상대적인 사이즈를 표현하는 단위로 쓰이는 fr이 있는데, 그것을 Fraction이라고 한다. Fr의 경우 grid만을 위해 만들어진 단위위고 , grid가 그것을 포함하고 있는 container를 빠져나가지 않게 작성되는데 도움을 준다. 

 

 아래 예시를 보면 쉽다. 슬래시(/) 이전에 나오는 2fr 1fr 1fr은 row에 배정되는 높이를 뜻하는데, 모두 합치면 4가 된다. 이 말은 배정된 container의 높이를 4로 나눈 것이 1fr이 된다는 뜻이다. (2fr은 2/4, 1fr 1/4, 1fr은 1/4 처럼)

 

 마찬가지의 방법을 슬래시 뒤에 표현된 column에도 적용하여 계산하면 된다. 이렇게 하면 총 container를 벗어나지 않게 하는 선에서 비율에 맞추어 grid를 만들 수 있게 된다. 

 

  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;

 

 아래와 같이 px 등의 다른 단위와 혼합해서 사용할 수도 있는데, 이 때 다른점은 fr은 다른 단위들이 쓰고 남은 공간을 나눠가진다는 점이다. 아래의 경우에는 기본 width가 100px이라고 치면, 1fr은 20px이 배정되게 된다. 

 

  grid-template-columns: 1fr 60px 1fr;

 

 

 

Repeat 함수

 그리드에서만 작동하는 함수로서 , 아래와 같은 표현으로 쓴다. 행과 열을 생성할때 반복되는 숫자가 있으면 여러번 쓰지 않게 해주어 편리하게 해주는 역할을한다

 기본적으로 괄호 안에 첫 요소가 행 혹은 열의 숫자이고 , 뒤에오는 단위가 붙은 숫자가 너비 혹은 높이이다 .

 

  grid-template-columns: repeat(3, 100px);

그러므로 위 표현은 아래와 같은 의미가 된다. 

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

 

 단위를 fr로 사용할 수도 있고 , 만약 repeat(2, 50px 30px); 이런식으로 사용한다면 총4개의 열이 생성되는데 50px 30px 50px 30px 이렇게 4개의 열이 생성되게 하는 방법이 된다. 

 

 마찬가지로 위의 축약형 grid-template : / ; 문법 안에 넣어 간편하게 표현할 수있다. 

 

 

Minmax

 grid가 포함된 화면을 늘리거나 줄일 때(너비가 설정되지 않은 grid container는 자동적으로 화면을 따라 커지고 줄어든다) , 따라서 커졌으면 하는 행이나 열이 있긴하지만, 동시에 그 행이나 열에 속한 요소들(이미지 등)이 행이나 열이 화면 크기에 따라 너무 작아지거나 너무 커지는 것을 방지하게 해준다.

 

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

 

위 볼드쳐진 부분에 minimax처럼 사용할 수 있다. 해석하면, 1열과 3열은 100px의 너비로 고정되어있고, 2열의 경우 minmax안에 100px이 최솟값 500px이 최댓값이 되어 화면 크기에 따라 grid사이즈가 바뀐다면,  100px에서 500px사이의 너비를 가지게 된다. 

 

 

Grid gap

 grid의 행과 열사이에 간격을 주는 명령어  row-gap 과 column-gap 이 있다. 

주의할 점은 grid 행과 열의 맨 첫과 끝에는 간격이 생성되지 않는다는 점이다. 

한 번에 행과 열의 간격을 설정하려면 속성 gap을 이용하면 된다. 

 

  gap: 20px 10px;

 

위의 경우 row의 간격 20px,  column의 간격 10px을 주게 되고, 만약 한개의 값만 입력되어있다면 row와 column둘 다에게 간격을 주게 된다. 

 

+

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

 

위 경우에 각각의 열이 차지하는 너비는 100px이 된다. 총 너비 320에서 gap 두개 발생 20px을 빼고 다시 각각의 fr인 3fr로 나누면 100px이 되게 된다. 

 

 

Grid Items

지금까지는 grid가 모두 한칸의 행이나 열만을 차지하고 있었는데, 뒤에 나오는 size 조절등의 속성을 활용하여 다채로운 형태를 만들 수 있다.

 

Multiple Row Items

아래의 명령어를 사용하면, 여러개의 row를 차지하는 grid를 만들 수 있다. 다만 주의해야할 점은 이제부터는 grid 전체를 대상으로 하는 것이 아니라, 이미 만들어진 grid 안에 속한 요소를 대상으로 정의한다는 점이다. 

grid-row-start   grid-row-end

 

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

위 예시를 보자, 결과부터 말하면 위 예시의 item의 경우 1열과 2열 총 2개의 열을 차지하게 된다. grid-row-start   grid-row-end 이 두가지의 속성이 받는 값을 grid line이라고 부르는데, grid line의 경우 1번부터 시작해서 그 grid가 가지고 있는 총 행이나 열 숫자에 1을 더한 값으로 끝난다. 

 

그런 원리로 start에 들어가는 숫자는 우리가 지정하고자 하는 열이나 행의 시작에 해당하는 숫자가 들어가야하고, end에 들어가는 숫자는 우리가 끝내고자하는 열이나 행의 숫자에 1을 더한 값이 들어가야 한다. 

 

 

grid-row 와 grid-column

 위에 나온 grid-row-start와 grid-row-end를 축약형으로 표현하는 속성이다. 아래 에시처럼 /가 들어가는 것에 유의(gird-template과 유사함, gap은 슬래시를 안쓰는 것을 기억)

 

 이렇게 여러개의 열과 행을 포함하는 덩어리가 생길 때에는 그 사이에 위치한 gap들을 포함한 너비나 높이가 됨을 기억. 

아래 예시의 경우는 4, 5번 열을 차지하는 2개 열 높이 + 사이에 gap을 포함하는 높이가 최종적으로 필요하게 됨 .

 

  grid-row: 4 / 6; 

 

마찬가지로 grid-column을 사용하면 여러 열을 차지하는 chunk를 만들 수 있다. 

 

Span을 활용하면 보다 직관적으로 표시할 수 있는데 예를 들어, 

  grid-column: 4 / span 2; 

의 경우에는 4 5 번 열을 합치는 요소를 만들어 내게 된다. 즉 span은 합쳐지는 칸의 갯수를 말한다. 

 

grid-column: 4 / 6; 

 

  grid-column-start: 4;
  grid-column-end: span 2;

 

  grid-column-start: span 2;
  grid-column-end: 6;

 

결과적으로는 위과 같은 결과를 만들어낸다. span을 활용하면 계산 착오로 만들어 질 수 있는 실수를 예방할 수 있다. 

 

 

Grid-area

위에 나온 grid-row와 grid-column을 다시 한번 축약한 것으로 총 4가지의 값을 필요로한다. 순서가 중요하니 꼭 기억해야한다. 아래 숫자 표시된 순서대로 할당되게 된다. 

 

  grid-area: 2 / 3 / 4 / span 5

 

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

;

요약

 

• grid-template-columns defines the number and sizes of the columns of the grid
• grid-template-rows defines the number and sizes of the rows of the grid
• grid-template is a shorthand for defining both grid-template-columns and grid-template-rows in one line
• row-gap puts blank space between the rows of the grid
• column-gap puts blank space between the columns of the grid
• gap is a shorthand for defining both row-gap and column-gap in one line
• grid-row-start and grid-row-end makes elements span certain rows of the grid
• grid-column-start and grid-column-end makes elements span certain columns of the grid
• grid-area is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end, all in one line
•  

 

ㅇ

 

 

마