목록Grid Column (1)

영이로운 개발 생활 ⌯･˕･⌯ಣ

[CSS] Grid(그리드) 정리

Grid(그리드)css 그리드 레이아웃은 웹페이지 제작을 위한 이차원 레이아웃 시스템!그럼, flex는 일차원 레이아웃 시스템!그리드는 수평선, 수직선으로 이루어져있으며하나의 그리드는 columns, rows로 구성되어있다.columns: 열의 크기를 정의row: 행의 크기를 정의설정하기부모요소 container --> 그리드 컨테이너자식요소 item --> 그리드 아이템display: grid 를 설정!! 100px 씩 설정을 해주고 확인을 해보니 item 들이 각 100px 자리잡혀있다. (가로)*반응형으로 진행할 때 px값 사용은 자제..*fr로 사용! (공간 비율)숫자 비율대로 영역의 크기를 나눈다.1fr은 1:1:1 의 크기를 만들겠다는 의미!그럼 이렇게 1:1:1 로 item 들이 영역을 가지..
영이로운 개발 생활 ꙳꒰•◡̎•꒱꙳ 2024. 12. 19. 13:07
이전 Prev 1 Next 다음