구글 블로그 만들기

display: grid 그리드(Grid)는 컨테이너(Container)와 아이템(Item)으로 구성됩니다. 아래는 그리드를 위한 간단한 예제입니다.

grid-template-columns grid-template-columns 속성으로 열의 개수와 폭을 정합니다. 기본값은 none으로, 열을 만들지 않습니다. 속성 값의 개수가 열의 개수이고, 각 속성값이 열 너비입니다. 예를 들어 속성값이 …

grid-auto-rows 그리드에서 열 개수는 grid-template-columns로 정합니다. 정해진 열 개수를 넘어가면 행이 바뀌고 높이는 행마다 다르게 정해집니다. 예를 들어 다음은 첫번째 행의 높이와 다른 행의 높이는 다릅니다.

아이템 사이의 간격 정하기 grid-column-gap, grid-row-gap, grid-gap은 그리드 아이템 사이의 간격을 정하는 속성입니다. 아래는 아이템 사이에 간격이 없는 간단한 그리드입니다.

order order 속성으로 그리드 아이템의 순서를 정할 수 있습니다. order 속성의 기본값은 0입니다. Grid로 아이템을 배치하면 입력된 순서대로 출력됩니다.

Grid 예제 높이가 같은 박스 만들기 < div class = "container" > < div class = "item" > Item …