Grid
grid 또한 flex와 마찬가지로 기존 css로는 layout을 표현하기 어렵다는 단점을 보완하기 위해 만든 css attribute이다 .
flext와 유사하게 container에 display:grid로 선언하여 container 내부의 item을 정렬하는데 사용하는 속성이다.
flex와 차이점으로는 flex는 direction을 한쪽으로만 지정하여 item을 배치하지만(flex-direction)
grid는 2차원적으로 row와 column을 2차원적으로 배치할 수 있다
페이지 레이아웃을 배치할 때 grid를 flex의 상위호완으로 봐도 무방하다 (그만큼 더 어렵지만)
| Container | Item |
| grid-template-rows/grid-template-columns: grid별 너비/높이 명시적으로 설정 | grid-column-start / grid-column-end / grid-column / grid-row-start / grid-row-end / grid- row: 각 grid의 영역을 지정 |
| gap/row-gap/column-gap: grid 간 간격 설정 | grid-area: grid-template-areas의 각 grid별 매칭을 위한 네이밍 속성. |
| grid-auto-rows/grid-auto-columns: grid별 너비/높이 암시적으로 설정 | align-self(justify-self): grid를 해당 cell안에서 세로(가로) 정렬 |
| grid-template-areas: grid의 배치를 grid별 네이밍(grid-area)으로 지정. | place-self: align-self와 justify-self를 같이 쓸 수 있는 속성 |
| align-items(justify-items) : 아이템을 각 row(column)안에서 세로(가로) 방향으로 정렬 | |
| place-items: align-items와 justify-items를 같이 쓸 수 있는 속성 | |
| align-content(justify-content): container 통째로 세로(가로) 방향으로 정렬 | |
| place-contents: align-content와 justify-content를 같이 쓸 수 있는 속성 |
grid-template-columns / grid-template-rows
각 grid(item)의 row의 크기(너비)를 설정해주는 css attribute이다.
.container{
/* grid를 3개씩 끊어 한 row에 표현. 각각의 너비를 200px, 200px, 500px로 지정한다.*/
grid-template-columns: 200px 200px 500px;
/*grid를 3개씩 끊어 한 row에 표현. 각각의 너비를 1:1:1로 지정한다.*/
grid-template-columns: 1fr 1fr 1fr ;
/*grid를 4개씩 끊어 한 row에 표현. 각각의 너비를 1:2:1:2로 지정한다.*/
/*repeat(반복횟수,반복값)*/
grid-template-columns: repeat(2, 1fr 2fr);
/*grid를 2개씩 끊어 한 row에 표현. 각각의 너비를 200px 나머지 2:1로 지정한다.*/
grid-template-columns: 200px 1fr;
/*grid를 3개씩 끊어 한 row에 표현. 각각의 너비를 100px,200px,100%-300px로 지정한다.*/
grid-template-columns: 100px 200px auto;
/*grid를 3개씩 끊어 한 row에 표현. 각각의 너비를 최소 100 최대 auto로 지정한다.*/
/*내용이 아무리 적더라도 100xp은 확보하며 내용이 너무 많아 100px이 넘어가면 자동으로 늘어난다*/
grid-template-columns: repeat(100px,auto);
/*grid를 한 row에 자동으로 갯수를 채워 넣는다. 각각의 너비를 최소 20% 최대 auto로 지정한다*/
/*내용이 매우 적으면 한 grid당 20%를 차지하게 되며 한 row에 총 5개의 grid가 채워진다.*/
/*내용이 너무 많으면 auto로 설정된 실제 computed value에따라 채워지는 갯수가 결정된다.*./
/*다 못채운다면 빈칸으로 남긴다*/
grid-template-columns: repeat(autofill,max(20%,auto));
/*grid를 한 row에 자동으로 늘여 채워 넣는다.*/
grid-template-columns: repeat(autofil,max(20%,auto));
}
grid-template-areas
각 grid에 이름을 붙이고 이 이름을 이용해서 container내에서 grid를 배치하는 css attribute
.container {
width:300px;
display:grid;
grid-template-areas:
"header header header"
" a main b "
" . . . "
"footer footer footer";
}
/*--------------Itmes-------------*/
div{border:solid 1px;}
.header { grid-area: header; text-align:center;}
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; text-align:center;}
.sidebar-b { grid-area: b; text-align:right}
.footer { grid-area: footer; text-align:center}
row-gap / column-gap / gap
각 grid(item)사이의 간격을 설정한다.
.container {
/* grid의 row간 간격을 10px로 설정한다*/
row-gap: 10px;
/* grid의 column간 간격을 20px로 설정한다*/
column-gap: 20px;
}
/*위의 상황과 동일하다
.container {
gap: 10px 20px;
}
*/
/*column,row 모두 10px
.container {
gap: 10px;
}
*/
grid-auto-columns / grid-auto-rows
위에 grid-template-columns(or grid-template-rows) 에서 크기를 지정하지 않은 grid(item)들에 대헤서 자동으로 크기를 부여한다.
미리 columns(or rows)의 갯수를 알 수 없어 크기를 명시적으로 선언할 수 없을때 사용한다.
grid-auto-columns 와 grid-auto-row 중 하나만 사용가능하다.
.container {
display:grid;
grid-template-columns: 80px 100px;
grid-template-rows: 30px 50px;
/*위에 설정한 갯수를 초과한 엘리먼트들에 대해서 적용되는 속성*/
grid-auto-rows: minmax(100px, auto);
}
grid-column-start / grid-column-end / grid-column / grid-row-start / grid-row-end / grid- row
chrome 또는 firefox의 개발자도구의 element를 보면 다음과 같이 grid의 구성요소를 볼수 있는 버튼이 있다. 이 버튼을 누르면 다음과 같이 grid의 각 셀의 영역이 어떻게 지정되어있는지 알 수 있다.
이 나뉜 구역을 바탕으로 각 셀의 영역을 어마나 차지하게할지 지정하는 css attribute이다.
위 상황의 css는 다음과같다.
.container{
display: grid;
grid-template-columns: 50px 50px 190px;
}
.item:nth-child(2){
background-color:orange;
border:solid 2px;
grid-row:1 / 2;
grid-column:1 / 3; /*어디서부터 어디까지 차지하게할지*/
}
.item{
background-color:green;
border: solid 1px;
}
.item:nth-child(3){
background-color:orange;
border:solid 2px;
grid-column:3; /*어디서부터 자동 지정된 한칸*/
}
.item:nth-child(4){
background-color:orange;
border:solid 2px;
grid-row:14 / 15;
grid-column:1 / span 1; /*어디서부터 몇칸을 차지하게 할지*/
}CSS-Grid 게임 겸 공부 사이트