CSS Grid Container 속성

 

CSS Grid Layout-1

 

CSS Grid Layout-2

 

 

안녕하세요 찐망고입니다.

이전에 그리드 레이아웃에 대한 포스팅을 올렸는데요.

 

오늘은 그리드컨테이너 속성만 따로 정리하는 포스팅입니다 ㅎ

 

display 속성

/* 블록 형태의 그리드 적용 */
.grid-container {
	display: grid;
}

/* 인라인블록 형태의 그리드 적용 */
.grid-container {
	display: inline-grid;
}

 

 

Grid Container 속성

Grid Container 속성	뜻
grid-template-rows	그리드 레이아웃의 행 크기를 지정
grid-template-columns	그리드 레이아웃의 열 크기를 지정
grid-template-areas	이름을 직접 지어  grid items와 연결할 틀을 만듬
grid-template	grid-template 축약 속성
row-gap	그리드 행과 행사이의 간격
column-gap	그리드 열과 열사이의 간격
gap	gap 축약 속성
grid-auto-rows	기본적인 행 크기 지정
grid-auto-columns	기본적인 열 크기 지정
grid-auto-flow	자동 배치된 항목이 그리드에 삽입되는 방법을 지정
grid	grid-template속성과 grid-auto속성의 축약 속성
align-content	컨테이너 내부의 전체 그리드를 수직으로 정렬하는 데 사용
justify-content	컨테이너 내부의 전체 그리드를 수평 정렬하는 데 사용
place-content	align-content와 justify-content의 단축 속성
align-items	그리드 아이템을 수직으로 정렬하는 데 사용
justify-items	그리드 아이템을 수평 정렬하는 데 사용
place-items	align-items와 justify-items의 단축 속성

 

 

1. grid-template-rows / grid-template-columns

 - 각 행과 열을 나누는 속성으로 수치를 준 만큼 행과 열이 생성됩니다.

 - 반복되는 행과 열은 repeat()을 사용할 수 있습니다.

 - auto는 컨텐츠 크기, 1fr은 남는 여백을 n분의1한다고 생각하면 됩니다.

 - 함수는 두번째 인수를 반복할 수 있으므로 마지막 코드처럼 표기할 수 있습니다.

/* grid-template-rows: none|auto|max-content|min-content|length|initial|inherit; */

/* grid-template-columns: none|auto|max-content|min-content|length|initial|inherit; */

.grid-container {
    display: grid;
    grid-template-columns: 200px 100px auto 100px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.grid-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr 2fr);
   /* 1fr, 2fr, 1fr, 2fr, 1fr, 2fr, 1fr, 2fr */
}

 

 

2. grid-template-areas

- 그리드 컨테이너와 그리드 아이템의 이름이 서로 같아야 합니다.

- grid layout1 게시글을 참고해주세요.

- 마침표를 사용하여 빈 영역을 지정할 수 있습니다.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    ". item01 ."
    "item02 . item03";
}
.item01 {
	grid-areas: item01;
}
.item02 {
	grid-areas: item02;
}
.item03 {
	grid-areas: item03;
}

 

 

3. grid-template

/* grid-template: <grid-template-rows> / <grid-template-columns>; */
/* grid-template: <grid-template-areas>; */


.grid-container {
  grid-template: 150px / auto auto auto;  
}

.grid-container {
    grid-template: 
        ". item01 ." 100px
        "item02 . item03" 200px
        / 1fr auto 100px;
}

/* 위 속성을 풀어 써보면 */
.grid-container {
    grid-template-rows: 100px 200px;
    grid-template-columns: 1fr auto 100px;
    grid-template-areas:
        ". item01 ."
        "item02 . item03";
}

 

 

 

4. row-gap / column-gap / gap

 - 열과 행으로 이루어진 그리드요소들 사이의 간격을 지정

/* gap: <row-gap> <column-gap>; */
.grid-container {
    display: grid;
    grid-template-colums: repeat(2, 1fr);
    gap: 10px 20px;
}

 

 

5. grid-auto-rows / grid-auto-columns

-  grid-template-row와 grid-template-colimns와 마찬가지로 행과 열 크기를 설정하지만

크기가 설정되지 않는 그리드 아이템에만 적용

 - 미디어 쿼리 시 열의 갯수가 달라지는 경우 지정해 놓음 편할 듯 

 

6. grid-auto-flow

- 자동 배치된 항목이 그리드에 삽입되는 방식을 제어

 - https://www.w3schools.com/cssref/playdemo.php?filename=playcss_grid-auto-flow

W3Schools CSS grid-auto-flow demonstration

grid-auto-rows: auto|max-content|min-content|length; 

row: 각 행 축에 따라 차례로 배치됨
columns: 각 열 축에 따라 차례로 배치됨
row dense: 각 행 축에 따라 차례로 배치됨, 빈 영역을 채움
columns dense: 각 열 축에 따라 차례로 배치됨, 빈 영역을 채움

grid-auto-flow row와 row dense비교

grid-auto-flow column과 column dense 둘이 같다

 

 

 

 

7. Grid

.grid-container {
    display: grid;
    grid: none;
}
.grid-container {
    display: grid;
    grid: grid-template-rows / grid-template-columns;
}
.grid-container {
    display: grid;
    grid: grid-template-areas;
}
.grid-container {
    display: grid;
    grid: grid-template-rows / [grid-auto-flow] grid-auto-columns;
}
.grid-container {
    display: grid;
    grid: [grid-auto-flow] grid-auto-rows / grid-template-columns
}

 

 

8. justify-content

- Normal 기본값 (Stretch와 같음)

- flex속성의 가로 주축을 기준으로 정렬하여 배치하는 방법과 같음

.grid-container {
  display: grid;
  justify-content: normal;
}
.grid-container {
  display: grid;
  justify-content: space-evenly;
}
.grid-container {
  display: grid;
  justify-content: space-around;
}
.grid-container {
  display: grid;
  justify-content: space-between;
}
.grid-container {
  display: grid;
  justify-content: center;
}
.grid-container {
  display: grid;
  justify-content: start;
}
.grid-container {
  display: grid;
  justify-content: end;
}
.grid-container {
  display: grid;
  justify-content: stretch;
}

 

 

9. align-content 

- Normal 기본값 (Stretch와 같음)

- flex속성의 세로 주축을 기준으로 정렬하여 배치하는 방법과 같음

.grid-container {
  display: grid;
  align-content: normal;
}
.grid-container {
  display: grid;
  align-content: space-evenly;
}
.grid-container {
  display: grid;
  align-content: space-around;
}
.grid-container {
  display: grid;
  align-content: space-between;
}
.grid-container {
  display: grid;
  align-content: center;
}
.grid-container {
  display: grid;
  align-content: start;
}
.grid-container {
  display: grid;
  align-content: end;
}
.grid-container {
  display: grid;
  align-content: stretch;
}

 

 

10. place-content

- align-content와 justify-content 동시 적용할 때 사용
- 하나의 값만 입력하면 두 속성에 모두 적용

place-content: <align-content> <justify-content>;

 

 

11. justify-items

- flex값은 flex속성에서만 사용 

W3Schools CSS justify-items demonstration

 

 

12. align-items

- flex값은 flex속성에서만 사용 

W3Schools CSS justify-items demonstration

 

 

13. place-items

place-items: <align-items> <justify-items>;

W3Schools CSS place-items demonstration

 

 

 

 

 

 

참고사이트

CSS Grid Layout Module Level 1