css grid 그리드, 정렬 및 그리드 단위 정리

grid Layout

- 웹페이지를 위한 이차원 레이아웃 시스템

- 콘텐츠들을 행과 열에 배치할 수 있으며, 복잡한 레이아웃을 직관적으로 구축할 수 있는 기능들이 있다.

 

- 그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 잇는 대상 패턴을 생성

- 하나의 그리드는 columns, rows로 구성 되며, 각 행과 열 사이에 공백이 있다.

이를 gutters라고 부른다.

 

한줄 작성

- grid : 명시 row / 명시 columns

- grid : 명시 row, columns / 암시 row, columns

 

/* <'grid-template'> values */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
   <'grid-template-columns'> values */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* Global values */
grid: inherit;
grid: initial;
grid: revert;
grid: revert-layer;
grid: unset;

 

 

display: inline-grid

display: grid;
display: inline-grid;

- grid를 inline처럼 사용할 수 있다.

---

grid-template-columns / 세로, 열

- 열 하나마다의 크기값을 입력해주어야함.

grid-templat-rows / 가로, 행

- 행 하나마다의 크기값을 입력해주어야함.

 

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.ㅁ

 

 

 

 

 

- repeat(반복 횟수, 크기)로 설정 가능

 

auto-fill = 남는 공간 없이 columns의 개수가 늘어남

auto-fit = 남는 공간 없이 사이즈를 적용

 

---

grid-template-areas

- 격자 영역을 지정하고 격자에 셀을 설정 후 이름을 할당하는 속성

- 블록으로 네모 모양이 되도록 설정해줘야 함

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav  main"
    "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

---

row-gap(grid-row-gap)

columns-gap(grid-columns-gap)

 

- 요소 사이의 간격 (gutters)크기를 설정

* gap: row, columns

두개를 한줄에 사용 가능

/* <length> values */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/* <percentage> value */
row-gap: 10%;

/* Global values */
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;

---

grid-auto-rows

grid-auto-columns

- 암시적인 칸에 새로 추가되는 부분들의 크기를 지정

- 생기지 않을때는 사용하지 않음

/* Keyword values */
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/* <length> values */
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/* <percentage> values */
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/* <flex> values */
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/* minmax() values */
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/* multiple track-size values */
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* Global values */
grid-auto-rows: inherit;
grid-auto-rows: initial;
grid-auto-rows: revert;
grid-auto-rows: revert-layer;
grid-auto-rows: unset;

 

---

grid-auto-flow

- 자동으로 배치되는 방식을 제어하여서 그리드의 흐르는 방식을 정확히 지정하는 속성

/* Keyword values */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/* Global values */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: revert;
grid-auto-flow: revert-layer;
grid-auto-flow: unset;

- row : 기본속성으로 가로방향

- colums : 세로방향

- dense : 만약 채워지지 않은 부분이 있으면 채워지게 되는 속성

---

justify-content

- 기본축과 그리드 컨테이너의 인라인 축을 콘텐츠 항목 사이와 주위의 공간을 분배하는 방법

 

align-content

- 교차축 또는 블록 축을 콘텐츠 항목 사이와 주위의 공간을 분배하는 방법

/* Positional alignment */
justify-content: center;     /* Pack items around the center */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end;   /* Pack flex items from the end */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

/* Baseline alignment */
/* justify-content does not take baseline values */

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between; /* Distribute items evenly
                                   The first item is flush with the start,
                                   the last is flush with the end */
justify-content: space-around;  /* Distribute items evenly
                                   Items have a half-size space
                                   on either end */
justify-content: space-evenly;  /* Distribute items evenly
                                   Items have equal space around them */
justify-content: stretch;       /* Distribute items evenly
                                   Stretch 'auto'-sized items to fit
                                   the container */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;

---

justify-items

- justify-content와 다르게 하나의 item의 공간에 정렬한다.

/* Basic keywords */
justify-items: normal;
justify-items: stretch;

/* Positional alignment */
justify-items: center;     /* Pack items around the center */
justify-items: start;      /* Pack items from the start */
justify-items: end;        /* Pack items from the end */
justify-items: flex-start; /* Equivalent to 'start'. Note that justify-items is ignored in Flexbox layouts. */
justify-items: flex-end;   /* Equivalent to 'end'. Note that justify-items is ignored in Flexbox layouts. */
justify-items: self-start;
justify-items: self-end;
justify-items: left;       /* Pack items from the left */
justify-items: right;      /* Pack items from the right */

/* Baseline alignment */
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

/* Overflow alignment (for positional alignment only) */
justify-items: safe center;
justify-items: unsafe center;

/* Legacy alignment */
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

/* Global values */
justify-items: inherit;
justify-items: initial;
justify-items: revert;
justify-items: revert-layer;
justify-items: unset;

---

grid-row

grid-columns

- start, end를 한번에 작성하는 속성

ex) grid-row: 1 / -1;

ex) grid-row: 2 / span2 == 시작칸부터 끝나는 칸

 

grid-row-start

grid-row-end

- grid는 칸이 아니라 줄로 나뉘어지기 때문에 입력값을 줄 수로 입력

 

 

grid-area

단축 속성

 

grid-area: row-start / columns-start / row-end / columns-end 

ex) grid-area: 4 / 2 / span 2 / -1;

---

order

- 현재 요소의 배치 순서를 지정한다.

- 컨테이너 아이템의 정렬 순서는 오름차순 order값이고, 같은 값일 경우 소스 코드의 순서대로 정렬

---

z-index

- 입력 값 에 따라서 보이는 순서를 정할 수 있다.

- 겹쳐지는 부분을 위해서 사용!

---

단위

- fr

* 상대적 비율, 남은 비율

 

- min-content

* 가장 작은 콘텐트의 길이, 단어의 공백을 개행을 통해서 단어에 딱 맞게

 

- max-content

* 가장 큰 콘텐트의 길이, 문장이 공백이 있어도 그 문장 전체에 딱 맞게

 

- minmax

* minmax(최대커지는 크기, 초대커지는 크기보다 커지면 나눠갖는 크기)