오늘도 개발

CSS display 이해하기 3 (grid) 본문

웹 프로그래밍/HTML & CSS

CSS display 이해하기 3 (grid)

Sueeeeeee 2022. 5. 13. 17:44

0-0. Grid란?

  • Grid Layout. floats이나 position보다 쉽게, Flex box보다 효과적으로 복잡한 레이아웃 구현할 수 있음.
  • Flex box는 1차원적 레이아웃, Grid는 2차원적 레이아웃(열, 행 존재)에 적합.
  • 부모-자식 필요 : 부모의 display 값을 grid로 선언하면 부모는 grid container, 자식은 grid item이 됨.
  • Grid container에 사용하는 프로퍼티, grid item에 사용하는 프로퍼티 따로 있음.

0-1. Grid 주요 개념

Grid Track

grid의 행/열.

 

Cell

Grid item이 차지할 수 있는 최소 단위 영역.

 

Grid Lines

grid에서 셀을 나누는 선.

 

Grid Number

Grid line의 번호.

 

Grid Gap

Grid 셀 사이의 공간

 

Greed Area

하나 이상의 cell로 이루어진 cell의 집합.

1. Grid container(부모)에 사용하는 프로퍼티

1) display

  • grid 사용하기 위해 선언.
  • 값: grid, inline-grid

2) grid-template-rows/grid-template-columns

  • grid의 행(row) 설정/열(column) 설정(= grid 트랙 크기 설정)
  • [] 사용해서 동시에 라인 이름도 설정 가능(BUT 보통은 디폴트로 지정된 이름 그냥 사용)
<head>
<style>
.grid-container {
  display: grid;
  /* 3열 2행의 그리드 생성 */
  /* 첫 열 너비 50px로 고정, 나머지 열은 전체 너비에서 50px 뺀 값을 1:1로 나눠서 배분 */
  grid-template-columns: 50px 1fr 1fr;
  /* 첫 행 높이 70px로 고정, 나머지 행은 전체 너비에서 70px 뺀 값 모두 배분 */
  grid-template-rows: 70px 1fr;
  padding: 10px;
}
.grid-item {
  background-color: yellow;
  border: 1px solid;
  font-size: 15px;
  text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
</div>
</body>
1
2
3
4
5
6

cf) repeat() 함수 사용해서 반복되는 값 처리하기

  • 사용 방법 : repeat(반복 횟수, 반복값)
/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr과 같음 */
grid-template-columns: repeat(5, 1fr)
/* grid-template-rows: 200px 1fr 200px 1fr과 같음 */
grid-template-rows: repeat(2, 200px 1fr)

cf) minmax 함수 사용해서 최솟값, 최댓값 설정하기

  • 사용 방법: minmax(최솟값, 최댓값)
<head>
<style>
.grid-container {
  display: grid;
  /* 3열 2행 그리드 생성 */
  grid-template-columns: 1fr 1fr 1fr;
  /* 1행은 item 사이즈가 아무리 작아도 높이 최소 50px 유지,
  item 사이즈가 50px보다 크면 따라서 높아짐,
  2행은 전체 높이에서 1행 높이 뺀 나머지 값 할당  */
  grid-template-rows: minmax(50px, auto) 1fr;
  padding: 10px;
}
.grid-item {
  background-color: yellow;
  border: 1px solid;
  font-size: 15px;
  text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
</div>
</body>
1
2
3
4
5
6

cf) auto-fill, auto-fit

  • 사용 방법: 셀 개수 미리 알 수 없을 때 사용.
  • auto-fill은 자동으로 채우고 공간이 남았을 때 빈 공간으로 둠.
  • auto-fit은 공간이 남으면 cell을 stretch해서 채움.
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto-fill, minmax(60px, 1fr);
}

.grid-item {
  background-color: yellow;
  border: 1px solid;
  font-size: 15px;
  text-align: center;
}
</style>

</head>
<body>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
</div>
</body>
  • auto-fill인 경우:
1
2
3
4
5
6
7
8
9
10
  • auto-fit인 경우:
1
2
3
4
5
6
7
8
9
10

3) grid-template-areas

  • 사용 방법 : grid item에 grid-area 이름을 주고, 그것을 바탕으로 그리드 생성.
  • 빈 칸은 none 또는 .로 표시
<head>
<style>
.grid-container {
  display: grid;
  /* 2열 3행 그리드 생성 */
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "header header"
                       "body ." /* 한 칸 비움 */
                       "body ad"
}

.item1{
  grid-area: header; /* grid-area 이름 설정 */
  background-color: teal;
}

.item2{
  grid-area: body; /* grid-area 이름 설정 */
  background-color: yellow;
}

.item3{
  grid-area: ad; /* grid-area 이름 설정 */
  background-color: blue;
}
</style>
</head>

<body>
<div class="grid-container">
  <div class="item1">header</div>
  <div class="item2">body</div>
  <div class="item3">ad</div>  
</div>
</body>
header
body
ad

4) grid-template

  • grid-template-rows, grid-template-columns, grid-template-areas를 한 번에 쓸 수 있는 프로퍼티

ex 1) grid-template: grid-template-rows값 / grid-template-columns값

<head>
<style>
.grid-container {
  display: grid;
  /* 2열 2행 그리드 생성 */
  grid-template: 1fr 1fr / 50px 1fr;
}

.item1{
  background-color: teal;
}

.item2{
  background-color: yellow;
}

.item3{
  background-color: yellow;
}

.item4{
  background-color: blue;
}
</style>
</head>

<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
</body>
1
2
3
4

ex 2) grid-template: grid-template-areas 값

<head>
<style>
.grid-container {
  display: grid;
  grid-template: "header header"
                 "body ad"
                 "footer footer"
}

.item1{
  background-color: teal;
  grid-area: header;
}

.item2{
  background-color: yellow;
  grid-area: body;
}

.item3{
  background-color: green;
  grid-area: ad;
}

.item4{
  background-color: blue;
  grid-area: footer;
}
</style>
</head>

<body>
<div class="grid-container">
  <div class="item1">header</div>
  <div class="item2">body</div>
  <div class="item3">ad</div>
  <div class="item4">footer</div>
</div>
</body>
header
body
ad
footer

ex 3) ex1 + ex2 같이 사용

<head>
<style>
.grid-container {
  display: grid;
/* 2열 3행 그리드 생성 동시에 grid-areas 지정 */
  grid-template: 'header header' 80px
                 'body ad' 50px
                 'footer footer' 100px
                 / 1fr 100px;
}

.item1{
  background-color: teal;
  grid-area: header;
}

.item2{
  background-color: yellow;
  grid-area: body;
}

.item3{
  background-color: green;
  grid-area: ad;
}

.item4{
  background-color: blue;
  grid-area: footer;
}
</style>
</head>

<body>
<div class="grid-container">
  <div class="item1">header</div>
  <div class="item2">body</div>
  <div class="item3">ad</div>
  <div class="item4">footer</div>
</div>
</body>
header
body
ad
footer

5) row-gap / column-gap

  • row 사이 간격 / column 사이 간격 설정
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2fr 1fr;
  grid-row-gap: 10px; /* 행 사이 간격 */
  grid-column-gap: 20px; /* 열 사이 간격 */
}
.grid-item {
  background-color: yellow;
  border: 1px solid;
  font-size: 15px;
  text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
</div>
</body>
1
2
3
4
5
6

6) Gap

  • row-gap / column-gap 동시에 설정하는 프로퍼티
  • gap : row-gap 값 / column-gap 값
  • 값 하나만 지정하면 row-gap, column-gap 동시 적용
.container {
   display: grid;
   gap: 20px / 40px /* row-gap은 20px, column-gap은 40px */
}
.container {
   display: grid;
   gap: 20px /* row-gap, column-gap 모두 20px */
}
.container {
   display: grid;
   gap: 0 20px /* column-gap만 20px */
}

7) grid-auto-rows / grid-auto-columns

  • row, column 개수를 미리 알 수 없을 때 사용.
  • 암시적으로 행 / 열 크기 설정하는 프로퍼티.
<style>
.container {
  width: 200px;
  height: 200px;
  display: grid;
  grid-template: 50px 50px / 70px 70px;
  grid-auto-rows: 50px; /* 암시적 행의 크기 */
}

.item1, .item2, .item3, .item4 {
  border: solid;
}

.item3 {
  grid-row: 3 / 4;
}
</style>
</head>

<body>
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>
</body>
1
2
3
4

8) grid-auto-flow

  • 아이템을 자동 배치해야 할 때 어떤 방식으로 할 지 설정.
  • 값 : row(기본값), column, row dense, column dense
<head>
<style>
.grid-container {
  display: grid;
  grid-template : repeat(4,50px) / repeat(3, 50px);
  grid-auto-flow : row; /* row dense 등으로 변경 가능 */

}

.grid-container > div {
  border: solid;
  background-color : yellow;
}

.item1{
 grid-column: 2 / span 2;
}

.item2 {
  grid-column: span 3;
}

.item3 {
  grid-column: span 2;
}

</style>
</head>

<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>
</body>

ex 1) row - row를 따라 순서대로 배치

1
2
3
4
5

ex 2) row dense - row를 따라 남는 공간 채우면서 배치

1
2
3
4
5

ex 3) column - column을 따라 순서대로 배치

1
2
3
4
5

ex 4) column dense - column을 따라 남는 공간 채우면서 배치

1
2
3
4
5

9) grid

  • grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns 줄여쓰는 프로퍼티.

ex 1) grid : grid-template 값

.parent {
   /* 3열 2행 그리드 생성 */
   grid: 100px 100px / 200px 300px 1fr;
}
.parent {
   /* 3열 2행 그리드 생성 */
   grid: "header header ad" 100px
          "body body ad" 100px
          / 200px 300px 1fr;
}

ex 2) grid : grid-template 값 + (grid-auto-columns / grid-auto-rows 값) + grid-auto-flow값

.parent {
  /* 3열 2행 그리드 생성, grid-auto-flow는 row dense, gird-auto-rows는 100px */
  grid: auto-flow dense 100px / 200px 300px 1fr;
}
.parent {
  /* 3열 2행 그리드 생성, grid-auto-flow는 column, gird-auto-columns는 200px */
  grid: 100px 100px / auto-flow 200px;
}

10) align-content

  • 그리드의 각 row를 수직 축 위에서 어떻게 정렬할 지 설정하는 프로퍼티.
  • 값 : normal(기본값, stretch와 동일), start(container 가장 상단에 붙임), center, end, space-around, space-between, space-evenly, stretch
<head>
<style>
.grid-container {
  display: grid;
  width: 400px;
  height: 300px;
  border: solid;
  grid-template : repeat(2,100px) / repeat(3, 100px);
  align-content: end;
}

.grid-container > div {
  border: solid;
  background-color : yellow;
}
</style>
</head>

<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item5">6</div>
</div>
</body>
1
2
3
4
5
6

11) justify-content

  • 그리드의 각 column을 수평 위에서 어떻게 정렬할 지 설정하는 프로퍼티.
  • 값 : normal(기본값, stretch와 동일), start(container 가장 왼쪽에 붙임), center, end, space-around, space-between, space-evenly, stretch
<head>
<style>
.grid-container {
  display: grid;
  width: 400px;
  height: 300px;
  border: solid;
  grid-template : repeat(2,100px) / repeat(3, 100px);
  justify-content: end;
}

.grid-container > div {
  border: solid;
  background-color : yellow;
}
</style>
</head>

<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item5">6</div>
</div>
</body>
1
2
3
4
5
6

12) place-content

  • align-content, justify-content를 동시에 설정하는 프로퍼티.
  • ‘place-content: align-content값 justify-content값’으로 표기
  • 값 하나만 있으면 align-content, justify-content에 같은 값으로 적용
  • IE에서 지원 안됨
.parent{
   place-content: center start;
}

13) align-items

  • 그리드 item을 각 셀 안의 수직 축 위에서 어떻게 정렬할 지 설정하는 프로퍼티.
  • 값 : normal(기본값, stretch와 동일), start(셀 가장 상단에 붙임), center, end, stretch
<head>
<style>
.grid-container {
  display: grid;
  width: 400px;
  height: 300px;
  border: solid;
  grid-template : repeat(2,100px) / repeat(3, 100px);
  align-items: end;
}

.grid-container > div {
  border: solid;
  background-color : yellow;
}
</style>
</head>

<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item5">6</div>
</div>
</body>
1
2
3
4
5
6

14) justify-items

  • 그리드 item을 각 셀 안의 수평 축 위에서 어떻게 정렬할 지 설정하는 프로퍼티
  • 값 : normal(기본값, stretch와 동일), start(셀 가장 왼쪽에 붙임), center, end, stretch
<head>
<style>
.grid-container {
  display: grid;
  width: 400px;
  height: 300px;
  border: solid;
  grid-template : repeat(2,100px) / repeat(3, 100px);
  justify-items: end;
}

.grid-container > div {
  border: solid;
  background-color : yellow;
}
</style>
</head>

<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item5">6</div>
</div>
</body>
1
2
3
4
5
6

15) place-items

  • align-items, justify-items를 동시에 설정하는 프로퍼티
  • ‘place-items: align-items값 justify-items값’으로 표기
  • 값 하나만 있으면 align-items, justify-items에 같은 값으로 적용
  • IE에서 지원 안됨.
.parent{
   place-items: center start;
}

2. Grid item(자식)에 사용하는 프로퍼티

1) grid-row-start, grid-row-end, grid-column-start, grid-column-end

  • Grid line의 시작 위치, 끝 위치 지정해서 item 배치.
  • Grid line의 숫자나 이름, 또는 span 키워드 사용. (span 1이 기본값)
<head>
<style>
.grid-container {
  display: grid;
  grid-template : repeat(2,100px) / repeat(3, 100px);
}

.grid-container > div {
  border: solid;
  background-color : yellow;
}

.item1{
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
}
</style>
</head>

<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>
</body>
1
2
3
4
5
<head>
<style>
.grid-container {
  display: grid;
  grid-template : repeat(2,100px) / repeat(3, 100px);
}

.grid-container > div {
  border: solid;
  background-color : yellow;
}

.item1{
  grid-column-start: span 2;
}

</style>
</head>

<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>
</body>
1
2
3
4
5

2) grid-row

  • grid-row-start, grid-row-end를 같이 설정하는 프로퍼티
  • “grid-row: grid-row-start 값 / grid-row-end 값”으로 표기
.item1{
   grid-row: 1 / 3;
}
.item1{
/* line 3에서 6까지 차지 */
   grid-row: 3 / span 3;
}

3) grid-column

  • grid-column-start, grid-column-end를 같이 설정하는 프로퍼티
  • “grid-column: grid-column-start 값 / grid-column-end 값”으로 표기
.item1{
   grid-column: 1 / 3;
}
.item1{
/* line 3에서 6까지 차지 */
   grid-column: 3 / span 3;
}

4) grid-area

  • grid-template-areas가 참조하는 area 이름 지정
  • 또는 grid-row, grid-column을 동시 설정.
  • area 이름 지정 시 grid-row, grid-column은 무시됨
  • grid-area : grid-row-start값 / grid-column-start 값 / grid-row-end 값 / grid-column-end 값
.item1{
/* row는 1번에서 3번까지, column은 3번에서 5번까지 차지 */
   grid-area: 1 / 3 / span2 / 5;
}

5) align-self

  • 개별 grid item을 셀 내 수직선상에서 배치하는 방식 설정.
  • 값 : normal(stretch와 동일, 기본값), start(셀 위쪽으로 붙임), center, end, stretch
<head>
<style>
.grid-container {
  display: grid;
  grid-template : 100px / repeat(3, 100px);
}

.grid-container > div {
  border: solid;
  background-color : yellow;
}

.item1{
  align-self: center;
}

.item2{
  align-self: end;
}
</style>
</head>

<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>
</body>
1
2
3

6) justify-self

  • 개별 grid item을 셀 내 수평선상에서 배치하는 방식 설정.
  • 값 : normal(stretch와 동일, 기본값), start(셀 위쪽으로 붙임), center, end, stretch
<head>
<style>
.grid-container {
  display: grid;
  grid-template : 100px / repeat(3, 100px);
}

.grid-container > div {
  border: solid;
  background-color : yellow;
}

.item1{
  justify-self: start;
}

.item2{
  justify-self: end;
}
</style>
</head>

<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>
</body>
1
2
3

7) place-self

  • align-self와 justify-self를 동시에 쓸 수 있는 프로퍼티
  • “place-self: align-self값 justify-self값”으로 표기
.item1{
   place-self: center end;
}

8) order

  • item이 배치되는 순서 변경하는 프로퍼티
  • 기본값 0. 숫자가 클수록 뒤로 감.
<head>
<style>
.grid-container {
  display: grid;
  grid-template : 100px / repeat(3, 100px);
}

.grid-container > div {
  border: solid;
  background-color : yellow;
}

.item1{
  order: 1;
}

.item2{
  order: -1;
}
</style>
</head>

<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>
</body>
1
2
3

9) z-index

  • item 위아래 배치 설정하는 프로퍼티.
  • 기본값 0, 숫자가 클수록 위로 올라옴.
<head>
<style>
.grid-container {
  display: grid;
  grid-template : 100px / repeat(3, 100px);
}

.item1{
  background-color : green;
  border: solid;
  transform: scale(1.2);
  text-align: center;
  z-index: -1;
}

.item2{
  background-color : yellow;
  border: solid;
  text-align: center;
}

.item3{
  background-color : yellow;
  border: solid;
  text-align: center;
}
</style>
</head>

<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>
</body>

 

1
2
3

 

 

참조 :
생활코딩 Web2 - css, 그리드
MDN web docs - CSS Grid Layout
Free Code Camp - CSS Grid
W3Schools.com - CSS Grid
Heropy Tech - CSS Grid 완벽 가이드
How to Efficiently Master the CSS Grid ? in a Jiffy
Codecademy - Learn CSS, 6. Grid
1분 코딩 - 이번에야말로 CSS 그리드를 익혀보자

'웹 프로그래밍 > HTML & CSS' 카테고리의 다른 글

시맨틱 태그(Semantic Tag)와 시멘틱 웹(Semantic Web)  (0) 2022.06.20
CSS로 반응형 웹 구현하기  (0) 2022.05.13
CSS display 이해하기 2 (flex)  (0) 2022.05.13
CSS display 이해하기 1 (inline, block, inline-block)  (0) 2022.05.13
CSS 박스 모델 이해하기  (0) 2022.05.12
'웹 프로그래밍/HTML & CSS' Related Articles more