Day14. grid

오늘은 grid에 대해 배웠다.

처음 배워보는거라 수업하고 실습하는데 흥미로웠다.

잘만 사용하면 좋을 것 같은데 연습 많이 해봐야 어떤 경우에 쓸지 생각이 잘날 것 같다.

연습으로,, ! 밑의 사진을 이용해 배치에 대해서 공부해보기로 했다.

사진을 조각 내서 순서를 섞어버렸다. css로 grid를 만져보면서 원래 사진으로 맞춰보는 연습을 해보겠다.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

컨테이너를 grid로 사용하겠다고 알려주는 display: grid; 속성 값을 적어주고, 화면의 요소들을 각 몇 개의 열과 행으로 만들건지 설정해 주는 속성도 함께 적어주었다.
나는 3개의 column과 3개의 row를 만들어주었다.
여기서 1fr은 각 column이 차지할 비율(전체 컨텐츠에 비례해서)을 말하는 것이고 난 같은 비율로 3개의 열을 만들어주고 싶으니까

 grid-template-columns: repeat(3, 1fr);
 grid-template-columns: 1fr 1fr 1fr;

이렇게 작성해 주었다. 위와 밑은 같은 말인데 만약 n(n>3)이상의 column을 만들어주고 싶은데 매번 적어주기 귀찮으니까 위 코드처럼 적어줄 수 있다. 같은 비율로 3개의 column만들기!

먼저 이미지 좌측 맨 위에 있는 해리의 다리를 원래 자리로 옮겨 보겠다. 원본 사진을 보면 맨 오른쪽 아래에 다리가 있다.

.item1 {
    grid-column: 3;
    grid-row: 3;    
}

우선 3번째 column으로 옮기고

다시 3번째 row로 옮겨주면,,

해리의 다리가 원래 위치로 온 것을 볼 수 있다.

같은 방법으로 사진을 다시 배치해주면,

원본 사진과 같은 결과를 얻을 수 있다.

.container {
    display: grid;
    width: 748px;
    height: 748px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.item1 {
    grid-column: 3;
    grid-row: 3;    
}

.item2 {
    grid-column: 2;
    grid-row: 3;
}

.item3 {
    grid-column: 3;
    grid-row: 2;
}

.item4 {
    grid-column: 3;
    grid-row: 1;
}

.item5 {
    grid-column: 2;
    grid-row: 2;
}

.item6 {
    grid-column: 2;
    grid-row: 1;
}