grid 기초

그리드 레이아웃은 행과 열의 구조를 통해 복잡한 레이아웃을 생성하는 데 도움이 되며, Flexbox와 함께 웹 페이지의 구조와 디자인을 조정하는 데 사용됩니다.

그리드 레이아웃을 만들기위해 HTML를 먼저 만들어보겠습니다.

	<div class="container">
       <div class="item">A</div>
       <div class="item">B</div>
       <div class="item">C</div>
       <div class="item">D</div>
       <div class="item">E</div>
       <div class="item">F</div>
       <div class="item">G</div>
       <div class="item">H</div>
       <div class="item">I</div>
	</div>

.container를 그리드 컨테이너, item을 그리드 아이템이라고 부릅니다.
부모요소에 display:grid를 주는 것으로 그리드 레이아웃을 사용할 수 있게 됩니다.

grid도 flex처럼 컨테이너에 주는 속성, 아이템에 주는 속성으로 나눌 수 있습니다.

그리드 컨테이너에 주는 속성

grid-template-rows , grid-template-columns

.container {
	grid-template-columns: 200px 200px 500px;
   /* grid-template-columns: repeat(5, 1fr); */
    /* grid-template-columns: 1fr 1fr 1fr */

	grid-template-rows: 200px 200px 500px;
}

grid-template-columns은 열의 배치,grid-template-row는 행의 배치를 결정합니다.
여기서 1fr은 앞의 숫자의 비율대로 전체의 크기를 나눕니다.

repeat

repeat은 같은 값이 반복될 때 한번에 처리해주는 함수입니다.
위 코드는 1fr을 5번 반복하라는 의미입니다. 따라서 5개의 1fr column이 생성됩니다.

gap

그리드 아이템 사이에 간격을 생성합니다.

.container {
	gap: 20px 10px;
}

row gap은 20px column-gap은 10px이 됩니다.

그리드 아이템에 주는 속성

grid-column-start

grid-column-end

이 속성들은 요소가 그리드에서 어느 열에서 시작하고 끝나는지를 지정합니다. 요소의 시작 열과 끝 열을 정의하려면 이 속성을 사용하고 정수 값 또는 span 키워드를 사용할 수 있습니다. 예를 들어, grid-column-start: 2; grid-column-end: 4;는 요소가 그리드의 두 번째 열에서 시작하고 네 번째 열에서 끝남을 의미합니다.

grid-row-start

grid-row-end

이 속성들은 요소가 그리드에서 어느 행에서 시작하고 끝나는지를 지정합니다. 마찬가지로, 정수 값이나 span 키워드를 사용하여 요소의 시작 행과 끝 행을 정의할 수 있습니다. 예를 들어, grid-row-start: 1; grid-row-end: 3;는 요소가 그리드의 첫 번째 행에서 시작하고 세 번째 행에서 끝남을 의미합니다.

grid-column

grid-row

grid-column-start, grid-column-end, grid-row-start, grid-row-end를 축약하여 사용할 수 있습니다. 예를 들어, grid-column: 2 / 4;는 grid-column-start: 2; grid-column-end: 4;와 동일합니다.

grid-template-areas

각 그리드 영역에 이름을 붙이고 아이템에 이름을 부여해서 배치하는 방법입니다.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header"
    "main   sidebar  sidebar"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

이는 헤더 , 메인 , 사이드바 , 푸터로 이루어진 간단한 레이아웃을 직관적으로 만들 수 있게 됩니다.