grid / repeat / grid-column

 

grid-template-columns : repeat(칸수, 너비)

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

1:2로 나눈 영역을 12번반복한것 총 24개칸의 생긴다.

총 갯수가 24개의 칸, 1fr + 2fr ,1fr + 2fr, 1fr + 2fr,...,1fr + 2fr반복된다.

grid-template-columns : repeat(12, 1fr 2fr); 적용모습

grid-template-colums : repeat(12, [col-start] 1fr);

컬럼을 12칸으로 나누고 첫열을 col-start라고 명명한다. 1:1비율로 나눈다.

grid-template-colums : 상위태그에서 열을 몇개를 나눌지 정한다.

 

grid-column : col-start / span 12;

열을 1열부터 12칸으로 나눈다.

1대신 col-start를 적으면 1열의 의미를 한다.

grid-column : 하위태그가 몇개의 컬럼을 차지할것인지 정한다.

#root>* 루트안의 전체범위이기때문에 이것을 적용하지않으면 header, nav영역이 

 

@media screen and (mind-width:500px) and (max-width: 799px)

500px부터 799px까지만 반응

500px이상일때 반응하는화면

 

 

grid-column: colstart 5 / span 9 ;

5열부터 9칸 colstart 5(5열의 이름)

 

 

 

 

#root{
    display: grid;
    grid-template-columns: repeat(12,[col-start] 1fr);
    gap: 20px; /*박스사이 갭*/

}
#root>*{ /*root안에 있는것 모두적용*/
    background-color: rgb(245, 37, 37);
    grid-column: col-start /span 12;
}

@media screen and (min-width: 500px) {

    #root > .side,
    #root > .ad{
        grid-column: 1 /span 3; /*1열부터 3칸*/
    }
    #root > .content,
    #root > .main-footer{
        grid-column: 4 / span 9; /*4열부터 9칸*/
    }
    #root > .side,
    #root > .content{ 
        grid-row: 3; /*3번라인 1칸*/
    }
    #root >.ad,
    #root > .main-footer{
        grid-row: 4;
    
    }
    
}