#8. CSS Grid Layout 속성

 

CSS Grid Layout은 CSS의 2차원 레이아웃 기술로,

웹 페이지에서 행과 열을 이용한 레이아웃을 구성할 수 있게 해줍니다.

다음은 각 속성에 대한 간단한 설명입니다.

 

1. grid-template-columns: 컨테이너에서 그리드의 열의 길이, 너비 및 특정 비율을 정의합니다.
2. grid-template-rows: 컨테이너에서 그리드의 행의 길이, 높이 및 특정 비율을 정의합니다.
3. grid-template-areas: 컨테이너의 각 셀에 대한 그리드 영역의 이름을 정의합니다.
4. grid-row-start: 그리드 항목이 시작하는 행을 지정합니다.
5. grid-column-start: 그리드 항목이 시작하는 열을 지정합니다.
6. grid-row-end: 그리드 항목이 끝나는 행을 지정합니다.
7. grid-column-end: 그리드 항목이 끝나는 열을 지정합니다.

 

예제 코드:

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

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
}

.item1 {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: 2;
}

.item2 {
  grid-row-start: 1;
  grid-column-start: 2;
  grid-row-end: 2;
  grid-column-end: 3;
}

.item3 {
  grid-row-start: 1;
  grid-column-start: 3;
  grid-row-end: 2;
  grid-column-end: 4;
}

.item4 {
  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 2;
}

.item5 {
  grid-row-start: 2;
  grid-column-start: 2;
  grid-row-end: 3;
  grid-column-end: 4;
}

위 코드에서, .container 클래스에 display: grid를 지정하여 그리드 레이아웃을 사용할 수 있습니다.

grid-template-columns와 grid-template-rows 속성을 사용하여 그리드의 열과 행의 크기를 정의합니다.

각 .item 클래스에서 grid-row-start, grid-column-start, grid-row-end, grid-column-end 속성을 사용하여 그리드 항목의 위치를 정의합니다.

 

예를 들어, .item1 클래스에서 grid-row-start는 1이며, grid-column-start는 1이고, grid-row-end는 2이며, grid-column-end는 2입니다. 이는 .item1 항목이 그리드의 첫 번째 행과 첫 번째 열에 위치한다는 것을 의미합니다.

이와 같이 그리드 항목의 위치를 정의하면, 그리드 레이아웃을 사용하여 항목을 배치할 수 있습니다.

CSS Grid Layout은 그리드 항목의 크기, 위치, 레이아웃을 쉽게 제어할 수 있는 매우 강력한 레이아웃 방식입니다.

 

 

다음은 grid-template-areas 속성을 사용하여 헤더, 사이드바, 메인 영역, 푸터로 나누는 레이아웃 샘플코드입니다:

<div class="grid-container">
  <header class="header">Header</header>
  <aside class="aside">Aside</aside>
  <main class="main">Main</main>
  <footer class="footer">Footer</footer>
</div>


.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "header header header"
    "aside main main"
    "footer footer footer";
}

.header {
  grid-area: header;
  background-color: lightblue;
}

.aside {
  grid-area: aside;
  background-color: lightgreen;
}

.main {
  grid-area: main;
  background-color: lightyellow;
}

.footer {
  grid-area: footer;
  background-color: lightcoral;
}

 

이 코드에서 grid-template-columns에서는 3개의 1fr 열을 정의합니다.

grid-template-areas에서는 각 영역의 위치를 나타내는 문자열을 정의합니다.

header는 첫 번째 행에, aside와 main은 두 번째 행에, footer는 세 번째 행에 위치한다는 것을 나타냅니다.

각 항목에서 grid-area 속성을 사용하여 그리드 영역의 위치를 지정합니다.

 

grid-template-areas를 사용하여 레이아웃을 구성하면 그리드 항목의 위치를 더 쉽게 지정할 수 있습니다.

그리드 영역의 위치를 변경하고 싶다면, grid-template-areas의 문자열을 변경하면 됩니다.

또한, grid-template-areas를 사용하면 그리드 항목의 크기를 직접 제어하는 것이 불가능하지만, 그리드의 구조와 관계를 명확히 할 수 있습니다.

결국, grid-template-areas는 레이아웃을 구성하는 데 편리한 방법이지만, 복잡한 레이아웃을 구성하는 경우에는 grid-template-columns, grid-template-rows, grid-row-start, grid-column-start, grid-row-end, grid-column-end 등의 속성을 활용하는 것이 더 효율적일 수 있습니다.

 

그리드 레이아웃에 대한 사용 방법은 아래의 게시물을 참고하면 조금 더 이해하기 쉬울 수 있습니다.
※ 참고: 한 장으로 정리하는 Grid Box