Grid 알아보기

Grid란?

2차원 레이아웃 시스템, CSS의 꽃 ...
열과 행을 원하는 만큼 제어하고 커스텀할 수 있다.

1. Grid 사용하기

1. Grid 설정하기

• Grid 또한 flex와 마찬가지로 부모 div에 설정해주는 값이다.
• 대신, flex보다 child에게 설정할 수 있는 값이 많다.

.father {
    display: grid;
    grid-template-columns: 100px 200px;
    /* 열 넓이를 설정해주기 */
    grid-template-rows: 200px 100px;
    /* 행 넓이를 설정해주기 */
    gap : 10px;
}

.child {
  background-color: tomato;
}

엄청 편하다 !!

F12 의 grid inspector를 켜면 훨씬 편하게 작업할 수 있다.

2. Grid Lines

• grid의 각 라인에는 넘버가 지정되어 있다.
• 행번호를 이용하여 각 영역을 조정할 수 있다.
  - 이 경우, 각 child와 대화하여 그리드 시작 위치를 조정해보자.

    .child:last-child {
  background-color: #62cfcf;
  grid-column-start: 2;
}

4번 상자가 2번 열로 이동했다.

• grid가 어디서 끝날지도 지정할 수 있다.

.child:last-child {
  background-color: #62cfcf;
  grid-column-start: 2;
  grid-column-end: 4;
}

눈물나게 감동적...

• column 말고 row에도 적용 가능하다.

.child:first-child {
  grid-row-start: 1;
  grid-row-end: -1;
}

• 라인이 음수값인 경우
  • -1은 라인의 끝이라는 뜻이다.
  • -3, -4, -5 등도 있는데 쓸일은 별로 없다.
• grid-column grid-row를 활용해 한번에 지정해줄 수도 있다.

.child:last-child {
  background-color: #62cfcf;
  /* grid-column-start: 2;
  grid-column-end: -1; */
  grid-column: 2 / -1;
}

.child:first-child {
  /* grid-row-start: 1;
  grid-row-end: -1; */
  grid-row : 1 / -1;
}

3. Grid names

• grid에게 이름을 부여할 수도 있다.
  - inspect에서 line names로 설정하고 이름을 부여해보자.
  • [] 를 사용해서 붙여줄 수 있다.

grid-template-columns: [cucumber] 100px [pdtato] 200px [banana] 50px [brocoli];

• 그럼 이제 2, 4 대신 감자랑 브로콜리를 넣을 수 있다.
  라인에 이름을 지어주면 덜 헷갈릴 수 있다. 이때 1, 4번을 잊지말자.

grid-column: potato / brocoli;

2. Grid Template

1. fr

• fr이란 해당 그리드 칸이 차지하는 비율을 뜻한다.

display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;

• 이때, grid-template-rows 는 자동으로 실행되지 않는데, 넓이는 자동이지만 높이는 자동으로 설정되지 않기 때문이다.
  - 이땐 height 값을 설정해주면 된다.

    display: grid;
    height: 100vh;
    /* 100vh는 view 의 100% 라는 뜻  */
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;

2. grid-template-areas

• grid에 이름을 붙일 수 있는 기능이다.

 grid-template-areas: 
    "header header header header"
    "content content content menu"
    "content content content menu"
    "footer footer footer footer";

감동적으로 나뉘어진다... 직관적이다 !!!

• 하지만 더 감동적인 건 grid-area
  - 나눠두었던 섹션에 이름을 붙여보자
  

header {
    background-color: aqua;
    grid-area: header;
  }
  
  section {
    background-color: coral;
    grid-area: content;
  }
  
  aside {
    background-color: forestgreen;
    grid-area: menu;
  }
  
  footer {
    background-color: deeppink;
    grid-area: footer;
  }

진짜 초.감.동 그자체

3. grid-template

• 더 간단한 방법이 있다 . (말도안돼~)

    grid-template: 
    "a a a a" 1fr
    "b b b c" 2fr
    "d d d d" 1fr / 1fr 1fr 1fr 1fr;

• 이때, 첫번째 쓰는 건 각 행의 넓이, / 쓰고 쓰는 건 각 열의 넓이이다.

초감동

이때, child에게 가서 grid-area를 지정해주는 걸 잊지 말자!!!!

4. span

• line을 세기는 귀찮고, 그냥 몇열 차지하는지 / 몇행 차지하는지 정도만 알 수는 없을까?

.child:first-child {
    background-color: khaki;
    grid-row: span 2;
}

.child:last-child {
    background-color: turquoise;
    grid-column: span 2;
}

• 시작점을 지정할 수도 있다

    grid-column: potato / span 2;

3. Grid Auto

• 우리가 생각한 것보다 content가 많을 때 grid가 어떻게 만들어지는지 보자.

1. 배경 설정

.father {
    display: grid;
    min-height: 50vh;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    /* 팁 : 1fr 반복이 지겨울 때 repeat(횟수,1fr) 할 수 있다  */
}

2. 유저가 웹에 올리는 동적 사이트의 경우 html을 제어할 수 없다. 이땐 어떻게 될까. child를 10개로 만들어보자.
   

• width 는 1fr씩 가져가지만, height가 없다.
• 이때, grid-auto-rows를 사용할 수 있다.

grid-auto-rows: 1fr;

-> 아직 생기지 않은 행들의 크기를 정해줄 수 있다.

3. 그럼 무조건 열은 고정, 행만 추가될까? grid-auto-flow를 이용하면 열이 추가되도록 할 수 있다.

grid-auto-flow: column;

• 이때도 grid-auto-columns : 1fr을 통해 간격을 고정할 수 있다.
• 1, 2, 3, 4의 순서도 세로로 바뀐 것에 주목하자.

4. Align and justify items

1. justify items에 대해 알아보자.

• .father에 두가지 코드를 추가하자.

justify-items: stretch;
align-items: stretch;

• 그냥 보면 별 차이가 없다. 이때 박스 (child)의 크기를 줄여보자.
  
• 그리드는 그대로 1fr이지만, 박스의 크기는 줄어든다.

justify-items : 가로 방향의 item 크기를 결정
align-items : 세로 방향의 item 크기를 결정
place-items : 세로 가로 (두개 동시에 지정하기)

• stretch : 최대 크기로 늘리기 (width, height가 없어야 함)
• center, start, end : grid내에서 움직이기

2. justify-self

• grid에도 마찬가지로 child가 스스로 위치를 결정할 수 있다.
• justify-self align-self place-self
• 해당 child가 2개 이상의 grid를 차지할 때도 똑같이 적용이 가능하다.

3. align-content justify-content

• 셀 그룹 정렬을 건드릴 수 있다.
• 단, 그리드 컨테이너에 여분의 공간이 있어야만 작용한다. (아니면 제자리에 있는 느낌일 것)
• place-content도 있다. (당연히 세로 가로)

5. Auto sizing and minmax

1. 3열 그리드를 만들고, 한 셀의 숫자만 길게 늘려보았다.
   

• 자동으로 줄바꿈이 일어난다.

2. column의 넓이를 max-content로 지정하면 줄바꿈이 일어나지 않게 할 수 있다.

grid-template-columns: 1fr max-content 1fr;

3. 반대는 min-content이며, 최소 단위 (여기선 가장 긴 단어)로 줄이게 된다.

4. 이를 활용해서 창을 줄여도 특정 셀은 줄어들지 않게 할 수 있다.

• minmax(min,max)를 활용해 가운데 셀을 400px 아래로 줄어들지 않게 해보자.

grid-template-columns: 1fr minmax(250px,1fr) 1fr;

• 평소엔 1fr을 차지하다가, 줄어들면 250px이하로는 안 가는 걸 볼 수 있다.
• minmax는 repeat(3, minmax())형태로도 사용할 수 있다.

Autofit & Autofill

1. 화면 디스플레이 크기에 따라 열과 행의 숫자가 변경되는 auto 설정을 넣어보자.

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

auto-fill과 auto-fit모두 화면 크기에 맞춰 열의 크기를 늘리거나 줄이거나 한다.

• auto-fit은 화면을 꽉 채우지만, auto-fill은 지정한 width를 지켜서 열을 최대한 많이 만든다. (열이 비어 있더라도)