[css]_15(grid)

3 minute read

CSS3 grid

2차원의 레이아웃 시스템을 제공한다. Flexible box도 훌륭하지만 1차원 레이아웃을 위하며
좀 더 복잡한 레이아웃을 위해서는 CSS Grid를 사용할 수 있다.

CSS Grid는 예전부터 핵으로 불리는 다양한 레이아웃 대체 방식등을 해결하기 위해 만들어진 특별한 CSS 모듈이다.

Grid

CSS의 Flex와 같이 Container , item이라는 개념을 갖는다.

GridContainer

display

Grid Container 를 정의한다. 정의된 컨테이너의 자식 요소들은 자동으로 Grid items가 된다.

display:grid;        <-container를 block요소처럼 인식
display:inline-grid; <-container를 inline요소처럼 인식한다.

Grid-template-rows,coloumns

rows

container에 들어가는 items의 명시적 행의 크기를 정의한다.
동시에 라인의 이름도 추가로 정의할 수 있다. 하나의 라인에 여러개의 이름을 정의할 수 있다.굳이 명시할 필요는 없다.
grid-template-rows의 특징은 grid-template-columns와 같다.

grid-row:1/4; 행의 1번 라인 부터 4번라인까지 쓰겠다.
                 정의할 수 있는 이름이 바로 이 라인이다.  

container를 일단 grid로 정의해준뒤에 설정하자!

.container{
display:grid;
grid-template-rows:[첫번째 행 이름] 100px [두번째 행 이름]100px;     2개의 고정크기의 행을 만든다.n개를 원하면 n번반복
grid-template-rows:1fr 1fr;         container의 크기가 변할때 가변하는 행으로 만들 수 있다.
grid-template-rows:repeat(2,100px); 여러번 입력이 번거로운 걸 repeat()함수를 이용한다.
grid-template-rows:repeat(n,100px 200px 300px); 100,200,300px 입력을 n번 반복한다.
}

columns

container에 들어가는 items의 명시적 열의 크기를 정의한다.

.container{
display:grid;
grid-template-columns:1fr 1fr;  container의 크기가 변할때 가변하는 행으로 만들 수 있다.
grid-template-columns:100px 100px; 2개의 고정크기의 행을 만든다.
grid-template-columns:repeat(2,100px); 여러번 입력이 번거로운 걸 repeat()함수를 이용한다.
grid-template-columns:repeat(n,100px 200px 300px); 100,200,300px 입력을 n번 반복한다.
}
}

Griditems

위에서는 container의 안에 들어가는 행과열을 설정했다(Container). 이번에는 container안에 있는 행인 items들의 설정을 배워본다.span은 확장하는 의미를 갖는다.

grid-column,row

grid-column-start grid-column-end의 단축 속성입니다.

grid-column:(grid-column-start) 1 / (grid-column-end) 3;   선택된 item의 열을 1번부터 3번까지 차지한다.  
grid-row:(grid-row-start) 1 / (grid-row-ent) 3;   선택된 item은 1번 1번선부터 3번선 행까지 차지한다.

span이 end부분에 쓰이면 grid-row:1/span 3;이라면 +의 느낌 1~4
span이 start부분에 쓰이면 grid-row:span 3/ 4;이라면 -의 느낌 1~4

grid-template-areas

지정된 그리드 영역 이름을 참조해 그리드 템플릿을 생성한다.
Grid-item에 적용하는 속성이다.

.container {
    display:grid;
    grid-template-rows:repeat(3, 100px);
    grid-template-columns:repeat(3,1fr);
    grid-template-areas:
    "header header header"              item을 배열하고 싶지 않은경우는 . 을 작성하면 된다.
    "main main aside"
    "footer footer footer"
    ;
}
header{ grid-area:header;}
main{ grid-area:main;}
aside{ grid-area:aside;}
footer{grid-area:footer;}

grid-row와 grid-column으로 아이템의 위치를 행과 열의 선의 위치를 기준으로 설정했다면
grid-template-areas는 아이템의 name을 설정한 뒤 배열한 item들을 기준으로 위치가 정해진다.

row,column-gap

행과 행 사이 row-gap
열과 열 사이의 간격 column-gap을 지정한다. (Gutter)

.container{
    row-gap: 1px; 행의 gutter 설정
    column-gap:1px; 열의 gutter 설정

    gap:1px(row-gap) 1px(column-gap);  단축속성 행과 열의 gutter 동시에 설정 
}

gap

행과 행 , 열과 열 사이의 gutter를 설정하는 단축속성

.container{
    gap:(row-gap) (column-gap) ; 단축속성으로서 한번에 행과 열의 gutter를 설정한다.
}

grid-auto-rows,columns

암시적 행과 열의 크기를 정의한다.
gird-template-rows,gird-template-columns로 설정하지 명시해주지 않는 행과 열등의 크기를 정의한다.

grid-auto-flow

배치하지 않은 아이템을 어떤 방식으로 처리할지 정의한다.
수직,수평정렬의 느낌으로 이해하자.

값	의미	기본값
`row`	행 축을 따라서 배치(수평정렬)	row
`column`	열 축을 따라서 배치(수직정렬)
`row dense or dense`	행 축을 따라서 배치 하는데 빈 영역을 메운다.
`column dense`	열 축을 따라서 배치 하는데 빈 영역을 메운다.

grid-area

두개의 쓰임새로 사용된다.

grid-template-areas가 참조할 영역의 이름을 설정할 때 사용한다.
grid-row-start,grid-column-start,grid-row-end,grid-column-end의 단축 속성으로 사용한다.

.item{
    grid-area:<grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>; 로 활용한거나
    grid-area: 아이템 name;
}

grid-template

grid-template-rows,grid-template-columns,grid-template-area의 단축 속성이다.

.container{
    display:grid;
    grid-template:               grid-template 단축속성 사용시 작성법!
    "header header header" 80px
    "main main aside" 350px
    "footer footer footer" 130px
    / 2fr 100px 1fr;

}
.container {
    display:grid;
    grid-template-rows:80px 350px 130px; grid-template 단축속성을 사용 안할시 작성법
    grid-template-columns:2fr 100px 1fr;
    grid-template-areas:
    "header header header"
    "main main aside"
    "footer footer footer"

}

위의 css는 grid-template 단축 속성을 사용하였다.
아래의 css는 grid-template단축 속성을 사용하지 않았을때이다. 이 둘의 값은 같다

grid

grid-template-xxx 와 grid-auto-xxx의 단축 속성이다.

.container{
    grid: <grid-template>;
    grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;   rows 다음 columns 가 온다고 생각하자.
    grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;
}

grid: <grid-template-rows> / <grid-template-columns>; 사용법과 이해

.container{
    grid:<grid-template-rows> / <grid-template-columns>; 예시
    grid: 100px 200px / 1fr 1fr;                         활용
}
.container{                                              우리가 배운 의미
    grid-template-rows:100px 200px;
    grid-template-columns:1fr 1fr;
}

<grid-template> 사용법과 이해

.container{
    grid: <grid-template>; 단축속성 예시
}
.container {               단축속성 활용
    grid:
    "header header header" 80px
    "main . aside " 350px
    "footer footer footer " 130px
    / 2fr 100px 1fr;
}
.container {              단축속성의 의미
     grid-template:
    "header header header" 80px
    "main . aside " 350px
    "footer footer footer " 130px
    / 2fr 100px 1fr;
}

grid-auto-flow 의 활용과 의미
row의 설정영역 / columns의 설정영역이라고 생각하는것이 이해하기 좋다.
앞에 auto-flow가 붙으면 rows가 암시적영역
뒤에 auto-flow가 붙으면 columns가 임시적영역을 설정한 것이다.

.container{     단축 속성 예시
    grid:<grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
}

.container{     단축 속성 활용
    grid:100px 100px / auto-flow 150px;  rows설정영역   /   columns설정영역
}            

.container{     단축 속성
    grid-template-rows:100px 100px;
    grid-auto-flow:column;
    grid-auto-columns:150px;
}

Twitter Facebook LinkedIn

Duckey Kim