[CSS] grid

seong-dodo·2021년 10월 30일
0

웹퍼블리싱(HTML, CSS)

목록 보기
12/12

전체 컨테이너 태그안에 아홉개 item 태그가 있다.

display : grid 속성 활용해보기

전체 컨테이너에 넣어주었주도록 한다.

그리드 사용시 % 단위보다 fr단위를 사용을 권장

colum은 열 | | |

row는 행


가로

justify-items : start 왼쪽으로 붙음
justify-items : end 오른쪽으로 붙음
justify-items : center 가운데 위치

세로

align-items : start 위쪽으로 붙음
align-items : end 아래쪽으로 붙음
align-items : center 가운데 위치


아래 컨테이너 자식 태그 아이템중 5번째 자식의 위치 조정할 시
아래와 같이 nth-child(5)에 코드 작성하기

참고:


1번 아이템을 아래와 같은 그리드를 표현하려고 하면

아래 기준을 잘 생각하면 쉬움!!!!

gird-colum: 1/4; 이렇게 적어주면되는데,
1부터 4까지 배치하겠다는 의미이다.

4번째 아이템을 아래와 같은 그림으로 만들려면

grid-row: 2/4; 이렇게 적어주면
2부터 4까지 배치하도록 하는 것이다.

그런데 위치가 순서대로 만들어지지 않는 것을 확인할 수 있음.
이유는 공간때문에 이러한 현상이 생김!

그래서 아래와 같이 원하는 순서와 그리드 모습으로 만들기 위해서
코드를 추가해주어야 한다.

gird-colum: 3;
grid-row: 2/4;


4번 아이템 위치는 그대로 있고 9번 아이템을 4번 아이템이랑 겹치게 하고 싶다면???

영역을 겹치게 하고 싶으면 억지로 아래와 같은 코드로 만들 수 있음.


출처 : 1분코딩 유투브

0개의 댓글