CSS · HTML

grid-column, row - 아이템 확장

혜원21 2021. 10. 22. 12:12
*

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칸까지 확장.

 

최근댓글