CSS 기초 06(grid란)

Grid Layout

grid layout란 이름 그래도 격자 형태의 layout을 만드는 2차원 layout방식을 말한다.

 

grid layout방식에서 grid item의 배치과 정렬은 grid container 내부의 행과 열의 상호작용을 통해 결정된다. 

• grid container: grid 방식으로 layout을 결정할 요소이며, grid container는 기본적으로 block 레벨 요소이다.
• grid item: grid container 내부에서 grid 방식으로 배치되는 요소

display: grid;

grid container로 지정하고 싶은 요소를 다음 속성을 추가여 grid container로 만들어 준다. 

 

inline레벨의 요소로 변경하고자 한다면,

display: inline-grid; 로 지정해줌으로써 바꿔준다.
> inline-flex : 인라인으로 배치하되, box(flex는 기본적으로 box레벨요소임) 레벨 요소의 속성을 추가할 수 있도록 처리한다.

display 속성으로 Grid Container를 정의한다.

 

grid 방식은 container에 행(row)과 열(columm)을 제공한다. 행과 열을 동시에 제어해 요소를 배치할 수 있다.

 

 

참고🖇️

https://heropy.blog/2019/08/17/css-grid/

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Grids