요소 배치

사용 가능

4.1 grid-column 속성

CSS Grid Layout은 그리드에서 요소의 배치를 관리하기 위한 강력한 도구를 제공합니다. 주요 도구 중 하나는 grid-rowgrid-column 속성입니다. 이 속성들은 개발자가 그리드-요소가 차지해야 할 행과 열을 정확하게 지정할 수 있도록 하며, 레이아웃에 대한 유연성과 제어를 제공합니다.

grid-column 속성은 그리드 컨테이너 내에서 요소가 차지할 열을 정의합니다.

문법:

.grid-item {
  grid-column: start / end;
}

여기서:

  • start: 그리드의 시작 라인
  • end: 그리드의 끝 라인

예제 1: 특정 열에 요소 배치하기

이 예제에서 요소는 두 번째와 세 번째 그리드 라인 사이에 배치되어 두 번째 열을 차지합니다:

CSS
.grid-item {
  grid-column: 2 / 3; /* 요소는 두 번째와 세 번째 그리드 라인 사이의 공간을 차지한다 */
}

예제 2: 여러 열을 차지하는 요소

이 예제에서 요소는 첫 번째 라인에서 시작하여 네 번째 라인에서 끝나는 세 개의 열을 차지합니다:

CSS
.grid-item {
  grid-column: 1 / 4; /* 요소는 첫 번째에서 네 번째 그리드 라인까지의 공간을 차지한다 */
}

예제 3: 여러 열을 포괄하기 위한 span 사용

이 예제에서 요소는 현재 위치에서 두 개의 열을 차지합니다:

CSS
.grid-item {
  grid-column: span 2; /* 요소는 현재 위치에서 두 개의 열을 차지한다 */
}

4.2 grid-row 속성

grid-row 속성은 그리드 컨테이너 내에서 요소가 차지할 행을 정의합니다.

문법:

.grid-item {
  grid-row: start / end;
}

여기서:

  • start: 그리드의 시작 라인
  • end: 그리드의 끝 라인

예제 1: 특정 행에 요소 배치하기

이 예제에서 요소는 첫 번째와 두 번째 그리드 라인 사이에 배치되어 첫 번째 행을 차지합니다:

CSS
.grid-item {
  grid-row: 1 / 2; /* 요소는 첫 번째와 두 번째 그리드 라인 사이의 공간을 차지한다 */
}

예제 2: 여러 행을 차지하는 요소

이 예제에서 요소는 두 번째 라인에서 시작하여 네 번째 라인에서 끝나는 두 개의 행을 차지합니다:

CSS
.grid-item {
  grid-row: 2 / 4; /* 요소는 두 번째에서 네 번째 그리드 라인까지의 공간을 차지한다 */
}

예제 3: 여러 행을 포괄하기 위한 span 사용

이 예제에서 요소는 현재 위치에서 세 개의 행을 차지합니다:

CSS
.grid-item {
  grid-row: span 3; /* 요소는 현재 위치에서 세 개의 행을 차지한다 */
}

예제 4. 음수 값을 사용하여 배치하기

CSS
.element {
  grid-row: 1 / -1; /* 요소는 첫 번째 라인에서 시작하여 마지막 라인에서 끝난다 */
}

4.3 grid-row와 grid-column 속성의 조합 사용

보다 복잡한 레이아웃을 만들기 위해 grid-rowgrid-column 속성을 조합하여 요소의 배치를 정확하게 제어할 수 있습니다.

예제: grid-row와 grid-column을 사용한 복잡한 레이아웃

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Row and Column Example</title>
    <style>
      .container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 100px);
        gap: 10px;
      }

      .item1 {
        background-color: lightblue;
        grid-row: 1 / 3; /* 요소는 첫 번째와 두 번째 행을 차지한다 */
        grid-column: 1 / 3; /* 요소는 첫 번째와 두 번째 열을 차지한다 */
      }

      .item2 {
        background-color: lightgreen;
        grid-row: 3 / 5; /* 요소는 세 번째와 네 번째 행을 차지한다 */
        grid-column: 2 / 5; /* 요소는 두 번째, 세 번째, 네 번째 열을 차지한다 */
      }

      .item3 {
        background-color: lightcoral;
        grid-row: 1 / 2; /* 요소는 첫 번째 행을 차지한다 */
        grid-column: 3 / 5; /* 요소는 세 번째와 네 번째 열을 차지한다 */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item1">Item 1</div>
      <div class="item2">Item 2</div>
      <div class="item3">Item 3</div>
    </div>
  </body>
</html>

설명:

  • 컨테이너 .container는 각각 동일한 공간을 차지하는 네 개의 행과 네 개의 열을 갖고 있습니다
  • 요소 .item1는 첫 번째와 두 번째 행 및 첫 번째와 두 번째 열을 차지합니다
  • 요소 .item2는 세 번째와 네 번째 행 및 두 번째, 세 번째, 네 번째 열을 차지합니다
  • 요소 .item3는 첫 번째 행 및 세 번째와 네 번째 열을 차지합니다
1
과제
Frontend SELF KO,  레벨 27레슨 3
잠금
여러 개의 열
여러 개의 열
코멘트
  • 인기
  • 신규
  • 이전
코멘트를 남기려면 로그인 해야 합니다
이 페이지에는 아직 코멘트가 없습니다