CSS Property - Display : grid 속성

 

CSS Grid

 

---

 

• Flex보다  조금은 더 어려워하는 Grid 속성다루기에 오신 것을 환영합니다.
• Flex를 이해했다면, Grid도 어렵지 않습니다.
  
  
• 한번 시작해 봅시다~~!!

 

 

CSS Grid 에 대하여 알아봅시다~! 출발~!

 

Welcome to CODING HELL

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	열의 여백

gap은 Multiple Column 다중컬럼에서는 Safari에서 지원되지 않는다. 2024년 6월기준

 

 

Reference

 

Grid garden  - 유명한 grid garden 게임을 해보세요~!

https://cssgridgarden.com/#ko

Grid Garden

 

---

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.