grid

grid

그리드는 주요 페이지 영역을 설계 혹은 배치할때 사용합니다. 고정된 레이아웃을 만들기 위해서는 px 단위 사용을 하고, 가변적인 레이아웃을 제작하기 위해서는 퍼센트 혹은 grid의 fr 단위로 지정해서 유연하게 제작할 수 있습니다.

div {
    display : grid;
}
div {
    display : inline-grid;
}

grid-template-columns

명시적 행의 크기를 정의

• fr
• repeat
• px
• auto

div {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

 

 

 

grid-template-rows

크기 조정 기능을 정의

• fr
• repeat
• px
• auto

div {
    display: grid;
    grid-template-rows: 1fr 2fr;
}