#26- CSS - Grid

Grid란

Grid란 행.열의 2차원 레이아웃 제공. 여러 item을 감싸는 container로 구성되어 있음

 

기본 구성

<div class="container">
	<div class="item">A</div>
	<div class="item">B</div>
	<div class="item">C</div>
	<div class="item">D</div>
	<div class="item">E</div>
	<div class="item">F</div>
	<div class="item">G</div>
	<div class="item">H</div>
	<div class="item">I</div>
</div>

속성 예시

/* container1과 container2의 결과 값은 같다*/
.container1 {
    display : grid;
    grid-template:
        "header header header" 80px
        "a main b" 100px
        ". . ." 100px
        "footer footer footer" 200px
        / 1fr 100px 2fr;
}
.container2 {
    display : grid;
    grid-template-rows : 80px 100px 100px 200px;
    grid-template-columns : 1fr 100px 2fr;
    grid-template-areas:
        "header header header"
        "a main b"
        ". . ."
        "footer footer footer";
}
.header { grid-area: header; }
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; }
.sidebar-b { grid-area: b; }
/* 마침표는 빈칸 처리 */
.footer { grid-area: footer; }

grid 단축 입력

입력 방법이 어려워 자주 사용하지는 않음

/* grid-template*/
.container1{
    grid :
        "header header header" 80px
        "a main b" 100px
        ". . ." 100px
        "footer footer footer" 200px
        / 1fr 100px 2fr;
}
/* grid-template-rows / grid-auto-columns */
.container2{
    grid : 100px 50px / 1fr 2fr;
}
/* grid-template-rows / grid-auto-flow grid-auto-columns */
/* container3-1과 container3-2는 같은 내용 */
/* grid-auto-flow가 슬래시 앞에 있을 경우는 row, 뒤에 있을 경우는 column을 의미함*/
.container3-1{
    grid : 100px 50px / auto-flow 2fr;
}
.container3-2{
    grid-template-row : 100px 50px;
    grid-auto-flow : column;
    grid-auto-columns : 2fr;
}
/* grid-auto-flow grid-auto-rows / grid-template-columns */
.container4-1{
    grid : auto-flow dens 100px / 100px 2fr;
}
.container4-2{
    grid-template-row : 100px;
    grid-auto-flow : row dense;
    grid-auto-columns : 100px 2fr;
}

속성 설명

적용 위치	속성	개별 속성	의미	값
Grid Container	display		item 수평 정렬 속성 부여. grid와 inline-grid 설정 값에 따라 Container가 어떤 속성을 가질지 설정 가능 grid : Block 속성을 grid 부여 iinline-grid : inline 속성을 grid 부여	grid, inline-grid, block, inline, inline-block, flex, table, table-cell, none
	grid		grid-template-xxx과 grid-auto-xxx의 단축 속성.  grid : grid-template; grid : grid-template-rows / grid-auto-columns; grid : grid-template-rows / auto-flow grid-auto-columns; grid : grid-auto-flow grid-auto-rows / grid-template-columns;
	grid-template	-	행열의 크기 설정 또는 라인 이름 설정 가능 grid-template : grid-template-rows / grid-template-columns; grid-template : grid-template-areas;
		grid-template-areas	각 영역에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법. grid-area와 함께 사용된다. 상단 코드 참조
		grid-template-rows	행의 크기 설정. 라인 이름 설정 가능 grid-template-rows : 1행크기 2행크기; grid-template-rows : repeat( 3, 1fr); grid-template-rows : repeat(auto-fill, minmax( 100px, auto ));  grid-template-rows : [선이름] 1열크기 [선이름1 선이름2] 2열크기 [선이름];	숫자+단위, fr(비율), repeat(개수,크기). minmax(최소값, 최대값), auto-fill
		grid-template-columns	열의 크기 설정. 라인 이름 설정가능 grid-template-columns : 1열크기 2열크기; grid-template-columns : repeat(1fr, minmax( 100px, auto )); grid-template-columns : [선이름] 1열크기 [선이름1 선이름2] 2열크기 [선이름];
	grid-auto-	grid-auto-rows	정의한 그리드 밖의 셀 생성 시, 행의 가로 너비 설정	숫자+단위, fr(비율)
		grid-auto-columns	정의한 그리드 밖의 셀 생성 시, 열의 세로 너비 설정
		grid-auto-flow	아이템이 자동배치 되는 흐름 설정 row : 수평 배치 column : 수직 배치 dense : 수평 배치. 빈 영역 매움 row dense : 수평 배치. 빈 영역 매움 column dense : 수직 배치. 빈 영역 매움	row, column, dense, row dense, column dense
	gap	-	행열 사이 간격 설정 gap : 10px 20px;	숫자+단위
		row-gap	행과 행사이 간격 설정
		column-gap	열과 열 사이 간격 설정
	-content	align-content	그리드 컨텐츠를 수직 정렬함. 조건 : 그리드 컨텐츠의 세로 너비 < 그리드 컨테이너의 세로 너비 normal : 기본값. stretch와 동일. 최대한 길이를 늘려 사용 start : 시작점으로 정렬 end : 끝점으로 정렬 center : 가운데 정렬 space-between : 시작/끝점 양측 정렬 space-around :  : 동일 여백을 포함하여 정렬 space-evenly : 아이템들의 사이와 양 끝에 균일한 간격 생성	normal, stretch, start, end, center, space-between, space-around, space-evenly
		justify-content	그리드 컨텐츠를 수평 정렬함 조건 : 그리드 컨텐츠의 가로 너비 < 그리드 컨테이너의 가로 너비
	-items	align-items	그리드 아이템을 수직 정렬 함 조건 : 그리드 아이템 세로 너비 < 자신이 속한 그리드 행의 크기	normal, stretch, start, end, center
		justify-items	그리드 아이템을 수평 정렬 함 조건 : 그리드 아이템 가로 너비 < 자신이 속한 그리드 열의 크기
Grid Item	grid-area		1. grid-template-areas에서 사용한 이름을 사용하여 요소와 이어주는 속성 / 상단 코드 참조 2. grid-row와 grid-column의 단축 속성. grid-area 사용 시 grid-row와 grid-column는 무시 됨 grid-area : grid-row-start / grid-column-start / grid-row-end / grid-column-end; grid-area : 영역이름;	span 숫자, 숫자
	grid-row	-	열을 확장 설정 (가로 확장) grid-row : 시작숫자 / 끝숫자 ; span 숫자 = 숫자만큼 영역을 확장
		grid-row-start	열 확장 시작 설정
		grid-row-end	열 확장 끝 설정
	grid-column	-	행 확장 설정 (세로 확장) grid-column : 시작숫자 / 끝숫자 ;
		grid-column-start	행 확장 시작 설정
		grid-column-end	행 확장 끝 설정
	-self	align-self	각 아이템을 수직 정렬 함 조건 : 아이템 세로 너비 < 자신이 속한 그리드 행의 크기	normal, stretch, start, end, center
		justify-self	각 아이템을 수평 정렬 함 조건 : 아이템 가로 너비 < 자신이 속한 그리드 열의 크기
	order		Item 순서 설정	숫자
	z-index		item의 앞뒤 순서 설정	숫자

 

속성 내 함수 및 단위

1. 행/열의 너비를 설정하는 함수
   1. repeat(반복횟수/크기)
      1. 반복 함수
      2. repeat(3, 1fr) = 1,2,3열을 1:1:1비율로 지정하라와 동일. 
      3. repeat(3, 1fr 4fr 2fr)방식으로도 사용 가능
   2. minmax(최소값,최대값)
      1. 최소값 최대값을 지정
      2. 행/열의 크기를 지정할 때 사용

1. 1. fit-content(최대값)
      1. 행/열 크기를 아이템의 내용 크기에 맞추어 사용
      2. 최대값을 넘는 컨텐츠 사용시, 가로 크기 제한
2. 행/열의 너비를 설정하는 단위
   1. fr
      1. fraction의 약자.
      2. 비율을 설정하는 단위
      3. 행/열을 설정할 경우, px과 %를 정의하고 남은 공간을 비율로 나누어 사용
   2. min-content
      1. 그리드 아이템의 내용 기준
      2. 최소 너비로 설정
      3. 한글에 해당 단위 사용시, 한글자씩 쪼개지기 때문에 아래 속성을 추가해야 함
         1. word-break : keep-all;
   3. max-content
      1. 그리드 아이템의 내용 기준
      2. 최대 너비로 설정
3. 행/열의 개수를 설정하는 단위 
   1. auto-fill
      1. 행,열 개수를 컨테이너에 맞게 자동으로 조정
      2. 반응형 그리드에 유용
      3. 컨테이너가 커서 공간이 남았을 경우, 남는 공간을 비워 둠
   2. auto-fit
      1. 행,열 개수를 컨테이너에 맞게 자동으로 조정
      2. 반응형 그리드에 유용
      3. 컨테이너가 커서 공간이 남았을 경우, 남는 공간을 채움

 

 

 

 

#참고 글

studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자