CSS Grid

CSS Grid 는 복잡한 웹사이트를 만들도록 도와준다.

HTML 엘리먼트들을 행(rows), 열(columns)이 있는 grid container로 바꿔준다.

 

 

dispaly: gird; 

 

 

열(columns) 추가하기

grid-template-columns: 100px 100px 100px;

한 행에 폭(width)이 100px 열 세 개를 만들겠다는 의미

 

간단하게

grid-template-columns: repeat(3, 100px);

 

 

행(rows) 추가하기

뒤만 다르고 열과 같다

grid-template-row: 50px 40px;

위에서 부터 50px, 40px 높이로 만든다.

 

크기

폭, 높이를 정할 때 px, em 을 써도 되고 밑에것 써도 된다.

fr : 남는 공간을 비율로 정해서 ie. 1fr, 2fr

auto : 컨텐츠 자기가 가지고 있느 공간만큼

%

 

갭(gap)

열 간격 띄우기

grid-column-gap : 20px;

 

행 간격 띄우기

grid-row-gap: 5px;

 

하나로 쓰기

행열 간격 공평하게 띄워준다.

grid-gap: 10px;

 

행 간격 10px 띄우고, 열 간격 20px 띄우고

grid-gap: 10px 20px;

 

 

 

 

grid-column을 배우기 위한 가상 라인

 

 

 

grid-column : 2 / 4 실행시

이렇게 열 두개를 지혼자 차지한다

 

 

 

 

grid-row 를 사용하면 이렇게 된다

 

 

 

grid 안의 아이템들은 각자 방에 있다.

이 방안에서 정렬을 시켜줄 수 있다.

 

아이템 정렬시

좌-우

justify-self: stretch // 기본값

더

start, center, end 가 있다.

이 들을 컨텐츠 크기만큼 아이템 크기가 변해서 정렬된다.

 

위-아래로 정렬할 땐

align-self: stretch // 기본값

더

start, center, end

 

 

이젠 방 전체를 움직여보자

방전체 정렬시

좌-우

justify-items: stretch; // 기본값

위-아래

align-items: stretch; // 기본값

값은 아이템과 같다

start, center, end, stretch(기본값)

 

 

 

아이템마다 이름을 붙여준다.

 

grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";

 

 

놀라운건

grid-area: footer;

해당 아이템이 footer로 이동해서 전체 다 잡아먹는다.

 

 

아이템마다 먼저 이름 붙이지 않았을 때

grid-area: 2/1/4/4;

두번째 수평라인에서/ 첫번째 수직라인에서/4번째 수평라인까지/4번째 수직라인까지

 

최소크기 최대크기 minmax

grid-template-columns: repeat(2, minmax(60px, 1fr));

 

 

auto-fill

또 어메이징 auto-fill 아마 nomadlist에서 이걸로 반응형 웹을 만들었지 않을까

grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));

 

auto-fit

거의 auto-fill 과 같다

다른점은 fit은 남는 공간을 아이템이 늘어나며 채우고, fill은 안채우고

 

 

반응형 웹을 만들자

media quaries 를 이용하자

@media (min-width: 400px) { }

 

 

gird 속에 grid 를 만들 수 있다

그냥 안의 아이템에

display: gird:

로 시작하면 된다.