[css속성] grid 파헤쳐보자!

 

< grid 정리 >

---

flex - 1차원 레이아웃(한방향)

grid - 2차원 레이아웃(두방향, 가로세로)

[참고] flex 속성

[css속성] flex 완벽 정복해보자

 

 ▶ grid-container (컨테이너) 적용 속성 

◾ display: grid

◾ gird-template-columns    //열배치(가로), 여러단위사용가능

   gird-template-rows    //행배치(세로)

ex) gird-template-columns : minmax(min-content, 300px) minmax(200px, 1fr) 150px;   

    //gird-template-columns :박스1 (띄워쓰기) 박스2  (띄워쓰기) 박스3 ....

◾ gaps: 10px;  column-gaps ,  row-gaps     // 사이간격 10px

◾ gird-auto-columns,

   gird-auto-rows     //(박스)갯수 알수 없을때 사용속성

ex) gird-auto-rows : minmax(100px, auto)

◾ gird-template-areas    //영역별 이름 

.container {
	grid-template-areas:
		"head head head"
		"  main    main    main   "   
		"   .     .      .   "     //.(점)은 여백
		"foot foot foot";
}
.header{ grid-area: head;}  //각 아이템마다 이름설정
.main{ grid-area: main;}
.footer(grid-area:foot;}

 

◾ gird-auto-flow : dense(빈여백채움), row , column , row dense , column dense  //자동배치

 

[정렬]

◾ align-content, justify-content    //flex동일

◾ place-content: center space-between  //(align-content justify-content)

 

◾ align-items(세로정렬), justify-items(가로정렬) : stretch, start, center, end

◾ place-items: center stretch;   //(align-items justify-items) 한번에정렬

 

[함수]

◾ repeat(반복횟수, 반복값) 함수

ex) gird-template-columns : repeat(3, 1fr);      //3번반복, 1fr을      (즉, 3개의 item이 1fr씩 균일하게 가로로 배치됨)

/*gird-template-columns :1fr 1fr 1fr;*/ 동일

◾ minmax(최소크기, 최대크기) 함수

ex) gird-template-rows : minmax(100px, auto);      //(rows니까 높이h가)최소100px되야함

//  높이(row) 내용물이 100px 넘을경우, auto 자동으로 조정해줌

ex) gird-template-rows : repeat(3, minmax(100px, auto)); 

◾ auto-fill(공간남을수있음), auto-fit(화면가득)

ex) gird-template-columns : repeat(auto-fill, 1fr);    gird-template-columns : repeat(auto-fill, 1fr);

grid-template-columns: repeat(auto-fill, minmax(20%, auto));

 

▶ gird-item (아이템) 적용 속성 

◾ gird-column : 1 / 3;               (1번라인 / 3칸) = 1번라인부터 3칸차지한다.

   gird-column :  3; (3칸)

/*grid-column-start:1;(1번라인)  gird-column-end:4(4번라인) */    동일

◾  grid-row : 1 / 2                      (1번라인 / 2칸) = 1번라인부터 2칸차지한다.

/*grid-row-start:1;(1번라인)  gird-row-end:3(3번라인) */    동일

◾  align-self, justify-self : stretch, start, center, end    //item별 각각 세로,가로 정렬

◾  place-self     //이젠쓸줄알겠지?

◾ order(순서), z-index

 

gird-template-areas *예제