2021 Newlecture/HTML & CSS
grid / repeat / grid-column
haileykim2014
2021. 3. 19. 18:11
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-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까지만 반응
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;
}
}