CSS Grid

• Grid Column(***Line을 기준으로 작성한다.)

 

 

 .box:first-child{

            grid-column: 1/3;

        }

 

• Row Start and End(*Line을 기준으로 작성한다.)

 

 

 

      .box:first-child{

            grid-column-start: 1;

            grid-column-end: 5;

        }

  

이렇게 작성하면

 

	grid-column-start: 1;
	grid-column-end: -1;

-1을 적으면 자동적으로 맨 마지막 line으로 이동하게 된다.

위처럼 적으면 한 라인을 다 차지하게 됨.

(1 ~ -1 : 모든 범위를 의미함.)

 

• Line naming

         

	grid-template-columns: [coffee-line] 1fr [macaroon-line] 
	1fr [cake-line] 1fr [americano-line] 
	1fr [pasta-line] 1fr [candy-line];
	grid-column-start: macaroon-line;
	grid-column-end: candy-line;

//or

  grid-template-columns: [first-line] repeat(5, 1fr) [last-line];
  grid-column-start: first-line;
  grid-column-end: last-line;

 

 

• grid-auto-flow(빈칸이 생기는 걸 원치 않을때)

 grid-auto-flow: dense;

 

//or

 

 grid-auto-flow: row dense;

 

//or

 

grid-auto-flow: column dense;

 

 

• Grid Row

첫번째 박스에게 "5칸을 잡아먹어라" 하고

단순하게 말할수도 있음.

 

 .box:first-child{
	grid-row: span 5;
 }

 

//or

 

"row 5칸, column 3칸 잡아먹어라" 하고 말할수도 있음.

.box:first-child{
            grid-row: span 5;
            grid-column: span 3;
        }

• Grid Area

	.box:first-child{
            grid-area: start / start / end / end;
        }

 

: row start / column start / row end /column end 순서대로 적는다.

 

	.box:first-child{
            grid-area: 2 / span 3 / 5 / -1;
        }

 

 

column : 제일 마지막 라인부터 3칸을 차지

row : line 2 ~ line 5 까지 차지

 

//or

 

더 간단하게 쓰는 property

	.box:first-child{
            grid-area: row / column;
        }

 

: row / column 순서대로 몇 칸 차지할 지 적는다.

 

 	.box:first-child{
            grid-area: span 3/ span 4;
        }

 

 

 

row : 3칸 / column : 4칸

 

 

 

• Justify, Align, Place Self

 

 	.box:first-child{
           justify-self: center;
           align-self: center;
        }

 

//or

 

 	.box:first-child{
           place-self: center center;
        }

// ‹CSS-master› 강의 중의 일부를 적었다.