CSS 02-1 grid (template-columns, template-rows, template-columns)

 - 부모 태그에 display: grid;를 하면 적용이 되며 표저럼 만들어서 구간을 나누는 형태라고 생각하면 쉽다.

※ 기본 적으로 HTML에 만들고 난 후 css를 할게요~~

   <div class="grid">
        <div class="header"></div>
        <div class="content"></div>
        <div class="nav"></div>
        <div class="footer"></div>
    </div>

 

grid-template-columns

 - 가로의 넓이와 계수를 정한다. (밑에와 같이)

 - 값으로 원하는 개수 만큼 200px 200px 200px 200px 입력하면 가로에 200px길이의 칸 4개를 만든다. 그런데 개수가 늘면 비효율 적이다.

   그래서 repeat()를 이용한다. 예는 아래 코드 박스에 있다.

.grid {
    display: grid;
    grid-template-columns: repeat(4, 200px); /* === 200px 200px 200px 200px */ 
}

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

.content {
    background-color: #3498db;
}

.nav {
    background-color: #8e44ad;
}

.footer {
    background-color: #f39c12;
}

그런데 이렇게 하면 아무 변화가 없다 그 이유는 세로의 높이와 개수가 없기 때문이다.

 

grid-template-rows

 - 이 메소드가 세로의 높이와 개수를 정한다. grid-template-columns와 사용 방법은 동일하다.

.grid {
    display: grid;
    grid-template-columns: repeat(4, 200px);
    grid-template-rows: repeat(1, 300px); /* === 300px */
}

위와 같이 변경하면 이렇게 웹 페이지에 출력이 된다.

그렇가면 개수를 늘리면 어떻게 될까요?

.grid {
    display: grid;
    grid-template-columns: repeat(4, 200px);
    grid-template-rows: repeat(4, 300px); /* === 300px 300px 300px 300px*/
}

응?? 그런데 스크롤은 내려가는데 웹 페이지에는 출력되는 것이 없다. 그 이유는 해당 공간에 주어진 없이 없기 때문이다.

그럴 때 사용할 수 있는 메서드는!!

 

grid-template-areas

 - 여러 공간을 더 편리하게 하나 또는 그 이상의 속성들을 넣어주는 것이다. 메서드 뒤에 칸에 칸만큰 문자열로 이름을 넣어고 자식 태그에 grid-area를 선언하면 된다. 단 박스가 벗어나면 웹페이지에 깨지는 형태로 나온다.

예시) {html에 각 숫자를 넣어줌 (보기 좋게)}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 200px);
    grid-template-rows: repeat(4, 200px);
    grid-template-areas: 
        "header header header header" /* 이렇게 붙어 있어야 됨 */
        "content content content nav" /* "content nav content nav" <- 입력하면 이상하게 출력됨.*/
        "content content content nav"
        "footer footer footer footer";
}

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

.content {
    background-color: #3498db;
    grid-area: content;
}

.nav {
    background-color: #8e44ad;
    grid-area: nav;
}

.footer {
    background-color: #f39c12;
    grid-area: footer;
}