본문 바로가기
웹코딩 배우기/· CSS

grid-column, row - 아이템 확장

by 닐기 2021. 10. 22.

See the Pen grid-column by nilgi (@nilgi) on CodePen.

 

display: grid;
grid-template-columns: auto auto auto auto auto;
grid-gap: 5px;

 

• grid-column: 1 / 4; // 1에서 시작해 4열의 시작점까지 확장.
• grid-column: 1 / span 4; // 1에서 시작해 4칸까지 확장.
• grid-column: 2 / span 2; // 2에서 시작해 2칸까지 확장.

 

• grid-row: 1 / 4; // 1에서 시작해 4행의 시작점까지 확장.
• grid-row: 1 / span 2; // 1에서 시작해 2칸까지 확장.

 

반응형

댓글0