CSS
CSS Property - Display : grid 속성
ejey
2024. 6. 10. 21:53
CSS Grid
- Flex보다 조금은 더 어려워하는 Grid 속성다루기에 오신 것을 환영합니다.
- Flex를 이해했다면, Grid도 어렵지 않습니다.
- 한번 시작해 봅시다~~!!
CSS Grid 에 대하여 알아봅시다~! 출발~!
Grid Overview
- Flex box에서는할 수 없는 그리드 방식을 레이아웃을 구현할 수 있는 속성입니다.
- 참조사이트 - 바로가기
A. Grid container
- 참조사이트 - 바로가기
- Grid연습을 위해 많은 학생들이 한번씩은 해보는 그리드 가든 게임~! - 바로가기
B. Grid items
- 참조사이트 - 바로가기
C. Flex, Grid 공통 속성
| Property | Value | Description | note |
| gap | Number | 축약형으로 gap : row-gap column-gap 을 줄여서 사용할 수 있다. |
바로가기 |
| row-gap | Number | 행의 여백 | |
| column-gap | Number | 열의 여백 |
Reference
Grid garden - 유명한 grid garden 게임을 해보세요~!
Grid Garden
A game for learning CSS grid layout
cssgridgarden.com
본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.
힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.
제 피드를 공유하거나 링크를 해주시는것은 감사합니다~
본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.
하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^
감사합니다.
반응형