목록그리드 탬플릿 (1)

sohyeon kim

[CSS] grid 정리 (1) : grid-template, gap, repeat(), minmax(), auto-fill

💡 grid layout : 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식 그리드 아이템의 배치와 정렬은 그리드 컨테이너 내부의 행과 열의 상호작용을 통해 결정된다! 그리드 방식은 컨테이너에 행 and 열을 제공한다. 행과 열을 동시에 제어해 요소를 배치할 수 있다! 그리드 컨테이너 : 그리드 방식으로 레이아웃을 결정할 요소 그리드 아이템 : 그리드 컨테이너 내부에서 그리드 방식으로 배치되는 요소 display : grid 기본적으로 블록 레벨 display : inline-grid 인라인 속성으로 쓰고 싶을 때! 시작해 보아요. 1 2 3 4 * { box-sizing: border-box; } body { margin: 0; } ul { padding: 0; list-style: none; bo..
CSS 2024. 1. 5. 16:53
이전 Prev 1 Next 다음