그리드(CSS Grid)

Grid는 html의 디자인을 담당하는 CSS의 기술중 최신기술에 속하는 방법입니다.
CSS 속성을 적용시키기 위해서는 <태그>가 반드시 필요한데, <h1>이나 <p>와 같은 태그들은 의미를 가지고있으므로 남용하면 정보가 꼬일수 있습니다.
이때 사용하는 태그가 <div>와 <span> 태그입니다. 이 둘은 아무 의미없는 무색무취의 태그로 <div>는 block level이, <span>은 inline 속성이 기본값으로 적용되어 있습니다.


Grid를 사용하기 전 선행조건으로는
1. 그리드를 사용하고자 하는 <태그>가 부모 <태그>로 묶여있어야합니다.
2. 부모 태그에 id=" "id값을 넣어줘야 합니다. (혹은 class값)
3. CSS <style> 태그에 #id값={display:grid 를 사용하고 원하는 grid 속성을 넣어주면 됩니다.

// 그리드 형태 정의
grid-template-columns: 20% 20% 20% 20% 20%  // 100을 기준으로 퍼센트, 허용단위(백분율, 픽셀, em, fr)
grid-template-columns: 50px 1fr 1fr 1fr 50px; // pixel percentage ems로 설정시 fr로 설정된 다른 열은 남은 공간에서 비율로 나뉘어짐.
grid-template-rows:  20% 20% 20% 20% 20%  // 100을 기준으로 퍼센트

grid-template: 60% 60% 60% / 200px; // 60%인 row 3개와 200px의 열을 생성 ( grid-template-rows 와 grid-template-columns 을 조합한 속성)

repeat: (3, 1fr); // 1fr 1fr 1fr // (반복횟수, 반복값) *fr(fraction;파편) : 숫자 비율대로 크기를 나눔 // 1fr 1fr 1fr : 1:1:1 비율인 3개의 column/row를 만들겠다

minmax(100px, auto): 최소한 100px, 최대는 자동으로 늘어나게 설정

auto-fill: 컬럼의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채움(모자르면 비워둠)
auto-fit: 컬럼의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채움(모자르면 채움)

// 그리드 형태를 자동으로 정의
// grid-template-columns(rows)의 통제를 받지 않는 것이 grid-auto-columns(rows)
grid-auto-columns
grid-auto-rows : minmax(100px, auto); // row의 갯수를 미리 알수없을때 사용

// 그리드 간격 만들기(* IE에선 사용불가)
row-gap: 10px;
column-gap: 2rem;
gap: 10px;

// 각 셀의 영역 지정
grid-column-start: 5; // 해당 컬럼에서 시작되는 column을 선택
grid-column-end: 2; // 해당 컬럼에서 종료되는 column을 선택 // start와 end는 순서가 바뀌어도 무관, 기준점이 바뀌어서 음수로 설정되도 무관
grid-column-end: span 2; // span을 이용하여 column의 넓이를 지정할 수 있음(양수만 설정 가능)
grid-column: 4 / 6; // grid 라인의 수직선 번호의 시작과 끝을 나타냄 (grid-column-start, end로 쓰기 불편하므로 이렇게 쓰는것이 더 편리)
grid-row-start:3; // 해당 행에서 시작되는 row를 선택
grid-row: 3/6; // grid 라인의 수평선 번호의 시작과 끝을 나타냄 (grid-row-start, end로 쓰기 불편하므로 이렇게 쓰는것이 더 편리)

// 영역 이름으로 그리드 정의 (* IE에서 미지원)
grid-template-areas:

             "header header header"

             "a a a "

             "footer footer footer";

grid-area: 1/2/4/6; // grid-row-start / grid-column-start / grid-row-end / grid-column-end (grid-column, grid-row 로 쓰기 불편하므로 이렇게 쓰는것이 더 편리)

// 배치순서
order: 5; // 각 아이템들의 시각적 나열 순서를 결정하는 속성, 양수,음수 모두 가능

 

// 정렬 관련 속성1
- stretch : 꽉채움
- start : 정렬방향의 시작점에 가깝게
- center : 정렬방향의 중앙에 위치하게
- end : 정렬방향의 끝점에 가깝게

// container 영역 전체에 적용(stretch/start/center/end)
- align-items : 세로 방향 정렬 
- justify-items : 가로 방향 정렬
- place-items : align-items와 justify-items 같이 쓸수 있는 속성

// 개별 item에 적용(stretch/start/center/end)
- align-self : 세로 방향 정렬
- justify-self : 가로 방향 정렬
- place-self : align-self와 justify-self 같이 쓸수 있는 속성

// 정렬 관련 속성2
- stretch : 꽉채움
- start : 정렬방향의 시작점에 가깝게
- center : 정렬방향의 중앙에 위치하게
- end : 정렬방향의 끝점에 가깝게
- space-between : 아이템 사의의 공간을 동일하게(margin쪽 여백은 없음)
- space-around : 아이템 양쪽에 같은 크기의 마진을 부여
- space-evenly : 아이템 사의의 공간을 동일하게(margin쪽 여백도 존재)

// container 영역 전체에 적용(Grid 아이템 통째로 정렬)(stretch/start/center/end/space-between/space-around/space-evenly)
- align-content : 세로 방향 정렬 
- justify-content : 가로 방향 정렬
- place-content : align-content와 justify-content 같이 쓸수 있는 속성

 

// 표준                                            IE

display: grid;                                    display: -ms-grid;
grid-template-rows                           -ms-grid-rows
grid-template-columns                      -ms-grid-columns
grid-row-start                                  -ms-grid-row
grid-column-start                             -ms-grid-column

grid-row: 1 / span 2;
에서 span 2 대신                             -ms-grid-row-span: 2 (-ms-grid-row 같이 써야함)

grid-column: 1 / span 2;
에서 span 2 대신                             -ms-grid-column-span: 2 (-ms-grid-column 같이 써야함)

align-self                                       -ms-grid-row-align
justify-self                                      -ms-grid-column-align

repeat(12, 1fr 20px)                          repeat(1fr 20px)[12]

 

grid-template, grid-template-areas, gird-area ===> 미지원....!!