[CSS] ch2.1 ~ ch2.4 : Grid1

ch2.1 : Life Before Grid

• flex box로는 grid 형태를 만들기 어렵다.

ch2.2 : CSS Grid Basic Concepts

.father {
    display: grid; /*grid 화면 생성 - father에서 해야함*/
    grid-template-columns: 250px 250px 250px; /*3개 열 생성*/
    grid-template-rows: 100px 50px 300px; /*3개 행 생성*/
    column-gap: 5px; /*열 사이 간격*/
    row-gap: 10px; /*행 사이 간격*/
}

• 행과 열의 간격이 동일하면 gap:10px로 적어도 된다.

ch2.3 : Grid Template Areas

grid-template-columns: 250px 250px 250px; 이 코드를 grid-template-columns: repeat(3,250px);로 쓸 수 있다.

.grid {
    grid-template-columns: auto 200px;
    grid-template-rows: 100px repeat(2, 200px) 100px;
    grid-template-areas:
        "header header header header"
        "content content content nav"
        "content content content nav"
        "footer footer footer footer";

}

.header {
    background-color: #2ecc71;
    grid-area: header; /*따옴표 쓰면 안 됨*/
}

• grid-template-areas를 쓰려면 grid-area로 영역에 이름을 설정해줘야 한다.

• "content content . nav" 이런식으로 비워둘 수도 있다.

ch2.4 : Rows and Columns

.grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(4, 100px);
}

.header {
    background-color: #2ecc71;
    grid-column-start: 1; /*header가 어디서부터 시작하는지*/
    grid-column-end: 3; /*header가 어디서 끝나는지*/
}

.nav {
    background-color: #8e44ad;
    grid-row-start: 2;
    grid-row-end: 4;
}

• start와 end는 같이 있어야 한다.
• 위의 start~end는 column을 의미하는 것이 아니라, line을 의미하는 것이다.
  즉, column 1에서 시작하고 3에서 끝나는 것이 아니다.(3칸 차지)
  line 1 ~ line 3 이므로, 2칸을 차지한다. (line은 gap이 생기는 위치)
• grid-row/column-start/end를 잘 쓰면 HTML수정 없이 요소의 위치/순서를 바꿀 수 있다.