[CSS] ch2.5 ~ ch2.8 : Grid2

ch2.5 : Shortcuts

grid-row-start: 2;
grid-row-end: 4;

• 위 코드는 grid-row : 2/4로 바꿀 수 있다.

• grid-row : 1/5는 grid-row : 1/-1로 바꿔 쓸 수 있다.
  끝에서부터 -1, -2, -3 ... 으로 쓸 수 있다.

• 위의 방법처럼 시작과 끝을 적는 대신에 span을 쓸 수 있다.
  얼마나 많은 cell을 가지고 있는지를 적으면 된다.

• 시작점이 필요할 때는 grid-row: 2 / span 2 처럼 적어도 된다.

ch2.6 : Line Naming

/*line에 이름 붙이기*/
.grid {
    display: grid;
    gap: 10px;
    grid-template-columns: [first-line] 100px [second-line] 100px [third-line] 100px [fourth-line] 100px [fifth-line];
    grid-template-rows: repeat(4, 100px [sexy-line]); /*repeat 안에 이름 넣기*/
}

/*line 이름 사용하기*/
.content {
    background-color: #3498db;
    grid-column: first-line / fourth-line;
    grid-row: sexy-line 1 / sexy-line 3;
}

• 위 코드처럼 line에 이름을 붙일 수 있다.
• repeat에 넣어서 하는 방식은 결국 100px [first-line] 100px [second-line] 100px .....과 같다. (맨 앞에 line이 사라짐)

ch2.7 : Grid Template

fr은 fraction이다. fraction은 사용 가능한 공간을 의미한다.

grid-template-columns: repeat(4, 1fr); /*화면 크기 전체를 4개로 나눔*/
grid-template-rows: repeat(4, 100px);

• width나 height를 따로 지정해주면 fr의 크기고 그에 따라 바뀐다.

.grid {
    display: grid;
    gap: 5px;
    height: 50vh;
    grid-template:
        "header header header header" 1fr /*row의 높이가 어떻게 되는지 정해줌*/
        "content content content nav" 2fr
        "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr;
        /*마지막으로 각 column의 너비가 어떻게 되는지를 정해줌*/
}

.header {
    background-color: #2ecc71;
    grid-area: header;
}

• 이런식으로 짧게 해결할 수도 있다.
• [line-start] "header header header header" 1fr [line-end] 이런식으로 이름을 넣을 수도 있다.
  (단, 한 줄만 넣는 것이 아니라 전부 넣어야 한다.)
• grid-template에서는 repeat는 쓰지 못한다.

ch2.8 : Place Items

• justify-items(수평) / align-items(수직)
  stretch가 기본, start, end, center 등이 있다.

• <div class="footer">footer</div> 이런식으로 내용이 있을 때 사용해야 한다.
  내용이 없는데 사용하면, width와 height가 없기 때문에 나타나지 않을 것이다.
  (css에서 .footer에 width와 height를 지정하면 나타나긴 한다.)

• align-items(수직) / justify-items(수평)을 한번에 쓸 수도 있다.
  place-items: stretch center; /*수직 수평*/