CSS:grid

CSS : grid

.grid-container {
  display: grid;
  grid: 150px / auto auto auto;
}

정의

이 grid 속성은 다음 속성들에 대한 축약속성입니다.

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow 현재 IE16 버전 이상에서만 지원하는 속성입니다.

속성

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

• none : 기본값이 없습니다. 열 또는 행의 구체적인 크기 조정 없음.
• grid-template rows / grid-template-columns : 열의 크기를 지정합니다.
• grid-template-areas : 명명된 항목을 사용하여 그리드 레이아웃을 지정합니다.
• grid-template rows / grid-auto-columns : 열 행의 크기(높이) 및 열의 자동크기를 지정합니다.
• grid-auto-rows / grid-template-columns : 자동배치 방법 및 행의 자동크기를 지정하고 grid-template-columns 특성을 설정합니다.
• grid-template rows / grid-auto-flow grid-auto-columns : 행의 크기(높이) 및 자동 배치 항목 배치 방법 및 열의 자동크기를 지정합니다.
• grid-auto flow grid-auto-rows / grid-template-columns : 행의 크기 배치 항목 매치 방법 및 지정합니다. 자동배치 항목배치 방법 및 행의 자동 크기를 지정하고 grid-tamplate-rows 특성을 지정합니다.
• Initial : 이 속성을 기본값으로 지정합니다.
• inherit :상위 요소에서 이속성을 상속합니다.