7. Grid Layout 내부 배치 (정렬)

Jan 07, 2026

Contents

1. Grid 레이아웃 정렬 1️⃣ justify-content 와 align-items 2️⃣ 정렬 방향부터 정리 3️⃣ justify-content (그리드 “덩어리” 정렬)4️⃣ align-items (아이템 내부 정렬)5️⃣ justify-items vs align-items (중요 비교)2. 실습 1️⃣ 박스 1개 배치하기 2️⃣ 박스 2개 배치하기 3️⃣ 박스 3개 배치하기 4️⃣ 연습

1. Grid 레이아웃 정렬

1️⃣ `justify-content` 와 `align-items`

justify-content → 그리드 전체를 정렬 (메인축)

align-items → 각 그리드 아이템 안의 내용을 정렬 (크로스축)

2️⃣ 정렬 방향부터 정리

속성	정렬 방향
`justify-*`	가로 방향 (inline axis) ➡️ 메인축
`align-*`	세로 방향 (block axis) ➡️ 크로스축

3️⃣ justify-content (그리드 “덩어리” 정렬)

1) 무엇을 정렬하나?

전체 그리드 트랙(열/행 묶음)

➡️ 컨테이너 크기 > 그리드 총 크기

➡️ 남는 공간이 있을 때만 효과 있음


.container {
	display: grid;
	width:800px;
	grid-template-columns: repeat(3, 150px);
	justify-content: center;
}

2) justify-content 값

값	설명
start	왼쪽 정렬
center	가운데
end	오른쪽
space-between	양끝 고정, 사이 균등
space-around	아이템 양옆 여백
space-evenly	모든 간격 동일

3) ⚠️ 동작 안 하는 경우


grid-template-columns: repeat(3,1fr);

➡️ 그리드가 이미 컨테이너를 꽉 채움

➡️ 남는 공간이 없어서 justify-content 효과 없음

4️⃣ align-items (아이템 내부 정렬)

1) 무엇을 정렬하나?

각 grid item 안에서 콘텐츠의 세로 위치


.container {
	display: grid;
	align-items: center;
}

2) align-items 값

값	설명
stretch (기본값)	셀 높이만큼 늘어남
start	위쪽 정렬
center	세로 가운데
end	아래 정렬

3) 개별 아이템 정렬


.item {
	align-self: end;
}

5️⃣ justify-items vs align-items (중요 비교)

속성	대상	방향
justify-items	아이템 내부 정렬	가로
align-items	아이템 내부 정렬	세로
justify-content	그리드 전체	가로
align-content	그리드 전체	세로

💡 items = 셀 안

💡 content = 그리드 덩어리

2. 실습

1️⃣ 박스 1개 배치하기

1) `justify-content`

메인 축 정렬


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .outer {
        display: grid;
        justify-content: center;

        width: 500px;
        height: 500px;
        border: 2px solid skyblue;
        background-color: aliceblue;
      }

      .inner {
        border: 1px solid red;
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="inner">안녕</div>
    </div>
  </body>
</html>

2) `align-items`

크로스축 정렬


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .outer {
        display: grid;
        justify-content: center;
        align-items: center;
        width: 500px;
        height: 500px;
        border: 2px solid skyblue;
        background-color: aliceblue;
      }

      .inner {
        border: 1px solid red;
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="inner">안녕</div>
    </div>
  </body>
</html>

2️⃣ 박스 2개 배치하기

1) `justify-content: space-between`

양끝 고정, 사이 균등


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .outer {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        width: 500px;
        border: 2px solid skyblue;
        background-color: aliceblue;
      }

      .inner {
        border: 1px solid red;
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="inner">안녕</div>
      <div class="inner">안녕</div>
    </div>
  </body>
</html>

3️⃣ 박스 3개 배치하기

1) `justify-content: space-between`

양끝 고정, 사이 균등


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .outer {
        display: grid;
        grid-template-columns: auto auto auto;
        justify-content: space-between;
        width: 500px;
        border: 2px solid skyblue;
        background-color: aliceblue;
      }

      .inner {
        border: 1px solid red;
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="inner">안녕</div>
      <div class="inner">안녕</div>
      <div class="inner">안녕</div>
    </div>
  </body>
</html>

2) `justify-content: space-evenly`

모든 간격 동일


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .outer {
        display: grid;
        grid-template-columns: auto auto auto;
        justify-content: space-evenly;
        width: 500px;
        border: 2px solid skyblue;
        background-color: aliceblue;
      }

      .inner {
        border: 1px solid red;
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="inner">안녕</div>
      <div class="inner">안녕</div>
      <div class="inner">안녕</div>
    </div>
  </body>
</html>

3) `justify-content: space-around`

아이템 양옆 여백


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .outer {
        display: grid;
        grid-template-columns: auto auto auto;
        justify-content: space-around;
        width: 500px;
        border: 2px solid skyblue;
        background-color: aliceblue;
      }

      .inner {
        border: 1px solid red;
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="inner">안녕</div>
      <div class="inner">안녕</div>
      <div class="inner">안녕</div>
    </div>
  </body>
</html>

4️⃣ 연습


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .outer {
        width: 500px;
        border: 2px solid skyblue;
        background-color: aliceblue;
      }

      .box1 {
        height: 250px;
        display: grid;
        justify-content: end;
      }

      .box2 {
        height: 250px;
        display: grid;
        justify-content: center;
        align-items: end;
      }

      .inner {
        border: 1px solid red;
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="box1">
        <div class="inner"></div>
      </div>
      <div class="box2">
        <div class="inner"></div>
      </div>
    </div>
  </body>
</html>

Contents

CSS

7. Grid Layout 내부 배치 (정렬)

박은서

Jan 07, 2026

Contents

1. Grid 레이아웃 정렬

1️⃣ `justify-content` 와 `align-items`

justify-content → 그리드 전체를 정렬 (메인축)

align-items → 각 그리드 아이템 안의 내용을 정렬 (크로스축)

2️⃣ 정렬 방향부터 정리

속성	정렬 방향
`justify-*`	가로 방향 (inline axis) ➡️ 메인축
`align-*`	세로 방향 (block axis) ➡️ 크로스축

3️⃣ justify-content (그리드 “덩어리” 정렬)

1) 무엇을 정렬하나?

전체 그리드 트랙(열/행 묶음)

➡️ 컨테이너 크기 > 그리드 총 크기

➡️ 남는 공간이 있을 때만 효과 있음


.container {
	display: grid;
	width:800px;
	grid-template-columns: repeat(3, 150px);
	justify-content: center;
}

2) justify-content 값

값	설명
start	왼쪽 정렬
center	가운데
end	오른쪽
space-between	양끝 고정, 사이 균등
space-around	아이템 양옆 여백
space-evenly	모든 간격 동일

3) ⚠️ 동작 안 하는 경우


grid-template-columns: repeat(3,1fr);

➡️ 그리드가 이미 컨테이너를 꽉 채움

➡️ 남는 공간이 없어서 justify-content 효과 없음

4️⃣ align-items (아이템 내부 정렬)

1) 무엇을 정렬하나?

각 grid item 안에서 콘텐츠의 세로 위치


.container {
	display: grid;
	align-items: center;
}

2) align-items 값

값	설명
stretch (기본값)	셀 높이만큼 늘어남
start	위쪽 정렬
center	세로 가운데
end	아래 정렬

3) 개별 아이템 정렬


.item {
	align-self: end;
}

5️⃣ justify-items vs align-items (중요 비교)

속성	대상	방향
justify-items	아이템 내부 정렬	가로
align-items	아이템 내부 정렬	세로
justify-content	그리드 전체	가로
align-content	그리드 전체	세로

💡 items = 셀 안

💡 content = 그리드 덩어리

2. 실습

1️⃣ 박스 1개 배치하기

1) `justify-content`

메인 축 정렬


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .outer {
        display: grid;
        justify-content: center;

        width: 500px;
        height: 500px;
        border: 2px solid skyblue;
        background-color: aliceblue;
      }

      .inner {
        border: 1px solid red;
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="inner">안녕</div>
    </div>
  </body>
</html>

2) `align-items`

크로스축 정렬


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .outer {
        display: grid;
        justify-content: center;
        align-items: center;
        width: 500px;
        height: 500px;
        border: 2px solid skyblue;
        background-color: aliceblue;
      }

      .inner {
        border: 1px solid red;
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="inner">안녕</div>
    </div>
  </body>
</html>

2️⃣ 박스 2개 배치하기

1) `justify-content: space-between`

양끝 고정, 사이 균등


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .outer {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        width: 500px;
        border: 2px solid skyblue;
        background-color: aliceblue;
      }

      .inner {
        border: 1px solid red;
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="inner">안녕</div>
      <div class="inner">안녕</div>
    </div>
  </body>
</html>

3️⃣ 박스 3개 배치하기

1) `justify-content: space-between`

양끝 고정, 사이 균등


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .outer {
        display: grid;
        grid-template-columns: auto auto auto;
        justify-content: space-between;
        width: 500px;
        border: 2px solid skyblue;
        background-color: aliceblue;
      }

      .inner {
        border: 1px solid red;
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="inner">안녕</div>
      <div class="inner">안녕</div>
      <div class="inner">안녕</div>
    </div>
  </body>
</html>

2) `justify-content: space-evenly`

모든 간격 동일


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .outer {
        display: grid;
        grid-template-columns: auto auto auto;
        justify-content: space-evenly;
        width: 500px;
        border: 2px solid skyblue;
        background-color: aliceblue;
      }

      .inner {
        border: 1px solid red;
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="inner">안녕</div>
      <div class="inner">안녕</div>
      <div class="inner">안녕</div>
    </div>
  </body>
</html>

3) `justify-content: space-around`

아이템 양옆 여백


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .outer {
        display: grid;
        grid-template-columns: auto auto auto;
        justify-content: space-around;
        width: 500px;
        border: 2px solid skyblue;
        background-color: aliceblue;
      }

      .inner {
        border: 1px solid red;
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="inner">안녕</div>
      <div class="inner">안녕</div>
      <div class="inner">안녕</div>
    </div>
  </body>
</html>

4️⃣ 연습


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .outer {
        width: 500px;
        border: 2px solid skyblue;
        background-color: aliceblue;
      }

      .box1 {
        height: 250px;
        display: grid;
        justify-content: end;
      }

      .box2 {
        height: 250px;
        display: grid;
        justify-content: center;
        align-items: end;
      }

      .inner {
        border: 1px solid red;
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="box1">
        <div class="inner"></div>
      </div>
      <div class="box2">
        <div class="inner"></div>
      </div>
    </div>
  </body>
</html>

Contents

7. Grid Layout 내부 배치 (정렬)

1. Grid 레이아웃 정렬

1️⃣ justify-content 와 align-items

2️⃣ 정렬 방향부터 정리

3️⃣ justify-content (그리드 “덩어리” 정렬)

1) 무엇을 정렬하나?

2) justify-content 값

3) ⚠️ 동작 안 하는 경우

4️⃣ align-items (아이템 내부 정렬)

1) 무엇을 정렬하나?

2) align-items 값

3) 개별 아이템 정렬

5️⃣ justify-items vs align-items (중요 비교)

2. 실습

1️⃣ 박스 1개 배치하기

1) justify-content

2) align-items

2️⃣ 박스 2개 배치하기

1) justify-content: space-between

3️⃣ 박스 3개 배치하기

1) justify-content: space-between

2) justify-content: space-evenly

3) justify-content: space-around

4️⃣ 연습

7. Grid Layout 내부 배치 (정렬)

1. Grid 레이아웃 정렬

1️⃣ justify-content 와 align-items

2️⃣ 정렬 방향부터 정리

3️⃣ justify-content (그리드 “덩어리” 정렬)

1) 무엇을 정렬하나?

2) justify-content 값

3) ⚠️ 동작 안 하는 경우

4️⃣ align-items (아이템 내부 정렬)

1) 무엇을 정렬하나?

2) align-items 값

3) 개별 아이템 정렬

5️⃣ justify-items vs align-items (중요 비교)

2. 실습

1️⃣ 박스 1개 배치하기

1) justify-content

2) align-items

2️⃣ 박스 2개 배치하기

1) justify-content: space-between

3️⃣ 박스 3개 배치하기

1) justify-content: space-between

2) justify-content: space-evenly

3) justify-content: space-around

4️⃣ 연습

1️⃣ `justify-content` 와 `align-items`

1) `justify-content`

2) `align-items`

1) `justify-content: space-between`

1) `justify-content: space-between`

2) `justify-content: space-evenly`

3) `justify-content: space-around`

1️⃣ `justify-content` 와 `align-items`

1) `justify-content`

2) `align-items`

1) `justify-content: space-between`

1) `justify-content: space-between`

2) `justify-content: space-evenly`

3) `justify-content: space-around`