CSS 평면 요소 배치 grid

2차원적으로 요소를 배치하기 위한 방법을 알아보자.

grid

flex가 1차원 레이아웃을 담당했다면 grid는 2차원 레이아웃을 담당한다.
행과 열을 동시에 제어할 수 있어 복잡한 레이아웃을 쉽게 만들 수 있다.

부모 요소에 display: grid를 설정하면 부모 요소는 grid-container, 자식 요소는 grid-item이 되어 grid 레이아웃을 사용할 수 있다.

<!-- index.html -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

/* style.css */
.container {
  display: grid;
}

.item {
  background-color: #4967d8;
  color: white;
  padding: 10px;
  margin: 5px;
  text-align: center;
}

flex n grid
mdn grid
tricks grid
learn css grid

Grid design system
Grid design system은 화면을 콘텐츠로 채우기 전에 위치를 정할 가이드를 먼저 그려서 어디에 무엇을 어떤 크기로 배치할지 설계하는 개념이다.
CSS의 grid는 이러한 개념을 구체화 한 기술이다.
Material Design
Using Grids in Interface Designs

그리드의 기본 구성 요소

1. 그리드 컨테이너
   그리드의 가장 바깥 영역으로 display: grid를 적용하는 컨테이너를 말한다.
2. 그리드 셀
   개념적으로 그리드의 한 칸을 의미한다.
3. 그리드 아이템
   그리드 셀 안에 자리하는 자식 요소!
   들을 의미한다.
4. 그리드 트랙
   그리드의 행(row) 또는 열(column)을 의미한다.
5. 그리드 라인
   그리드 셀을 구분하는 선을 의미한다.
6. 그리드 넘버
   그리드 라인의 각 번호를 의미한다.
7. 그리드 갭
   그리드 셀 사이의 간격(gutter)을 의미한다.
8. 그리드 에어리어
   그리드 셀의 집합을 의미한다.

grid-container 속성

grid-container인 부모에게 설정하는 속성에 대해 알아보자.

grid-template-columns/rows

grid-template-columns는 열방향 그리드 트랙의 사이즈, grid-template-rows는 행방향 그리드 트랙의 사이즈를 설정한다.
px, %, fr 단위를 사용할 수 있으며, fr은 분수(fraction)의 의미로 컨테이너를 분할해준다.

/* style.css */
.px {
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 200px 100px;
}
.percent {
  grid-template-columns: 50% 20% 30%;
  grid-template-rows: 50% 30%;
}
.fr {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2fr 1fr;
}

함수
1. repeat()
row 혹은 column 방향으로 grid-track의 사이즈를 좀 더 간단한 형태로 표현하도록 도와주는 CSS 함수.
함수에 전달하는 첫번째 인자는 반복 횟수(repeat count), 두번째 인자는 반복할 값이다.

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

반복되는 구조도 만들 수 있다.

.repeat2 {
  grid-template-columns: repeat(2, 1fr 2fr);
  /* 1fr 2fr 1fr 2fr */
}

2. minmax()
   그리드에서 최소와 최대 사이의 범위를 설정하는 함수.
   두 개의 인자를 가지며, 첫 번째는 최소값, 두 번째는 최대값을 의미한다.
   설정된 값은 최소값보다 크거나 같고, 최대값보다 작거나 같은 크기 범위를 정의한다.

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

3. auto-fill
   repeat() 함수와 함께 사용되는 키워드로, 컨테이너의 너비에 따라 자동으로 그리드 컬럼을 배치할 때 사용한다.
   auto-fill은 가능한 많은 컬럼을 만들어내며, 컨테이너에 빈 공간이 남을 수 있다.

   .auto-fill {
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }

4. auto-fit
   repeat() 함수와 함께 사용되는 키워드로, 컨테이너의 너비에 따라 자동으로 그리드 컬럼을 배치할 때 사용한다.
   auto-fill과 유사하지만, 그리드 컨테이너 내부에 공간이 남을 경우 그 공간을 각 셀들이 나눠 갖는다.

   .auto-fill {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }

gap

셀과 셀사이의 간격을 설정하는 속성으로, 복잡한 레이아웃 안에서 마진 대신 편리하게 간격을 설정할 수 있다.
flex와 동일한 속성이다.

.gap {
	gap: 10px; /* 모든 간격 */
}

align-content

그리드 아이템을 수직(열) 방향으로 정렬한다.
컨테이너 내에 여유 공간이 있어야 사용할 수 있다.

.stretch {
	align-content: stretch;
}
.center {
	align-content: center;
}
.start {
	align-content: start;
}
.end {
	align-content: end;
}
.space-around {
	align-content: space-around;
}
.space-between {
	align-content: space-between;
}
.space-evenly {
	align-content: space-evenly;
}

justify-content

그리드 아이템을 수평(행) 방향으로 정렬한다.
컨테이너 내에 여유 공간이 있어야 사용할 수 있다.

.stretch {
	justify-content: stretch;
}
.center {
	justify-content: center;
}
.start {
	justify-content: start;
}
.end {
	justify-content: end;
}
.space-around {
	justify-content: space-around;
}
.space-between {
	justify-content: space-between;
}
.space-evenly {
	justify-content: space-evenly;
}

align-items

각 셀 내에서 그리드 아이템을 수직(열) 방향으로 정렬한다.

.stretch {
	align-items: stretch;
}
.center {
	align-items: center;
}
.start {
	align-items: start;
}
.end {
	align-items: end;
}

justify-items

각 셀 내에서 그리드 아이템을 수평(행) 방향으로 정렬한다.

.stretch {
	justify-items: stretch;
}
.center {
	justify-items: center;
}
.start {
	justify-items: start;
}
.end {
	justify-items: end;
}

grid-item 속성

grid-item인 요소들에게 설정하는 속성에 대해 알아보자.

grid-area

그리드 아이템의 위치와 크기를 지정하는 단축 속성이다.

/* 각각의 값은 그리드 라인의 번호를 의미 */
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 4;
 
/* row-start, column-start의 축약 */
grid-row: 1/2;
grid-column: 1/4;
 
/* grid-row-start는 첫 번째 값
	grid-column-start는 두 번째 값
	grid-row-end는 세 번째 값
	grid-column-end는 네 번째 값 */
grid-area: 1/1/2/4;
 
/* span 은 셀을 의미. span 3은 셀 세개를 의미. */
grid-area: 1/1/1 / span 3;

그리드에서 행과 열을 병합할때 span 키워드를 사용한다.
(테이블에서는 colspan, rowspan 이 있다)

grid-template-areas

grid-template-areas로 영역을 정의하고, grid-area로 아이템을 배치한다.

<!-- index.html -->
<div class="container">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main</main>
  <footer>Footer</footer>
</div>

/* style.css */
.container {
  display: grid;
  grid-template-areas:
    'header header'
    'nav main'
    'footer footer';
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  height: 300px;
}
 
header {
  grid-area: header;
  background-color: #3498db;
}
nav {
  grid-area: nav;
  background-color: #2ecc71;
}
main {
  grid-area: main;
  background-color: #e74c3c;
}
footer {
  grid-area: footer;
  background-color: #f39c12;
}

z-index

그리드 내에서 z-index를 사용하여 아이템의 쌓임 순서를 제어할 수 있다.
grid 안에서는 굳이 position 속성을 사용하지 않더라도 화면에 보여지는 우선순위를 설정할 수 있습니다.

.item {
  z-index: 1;
}

정렬 관련 속성

개별 그리드 아이템의 정렬을 제어한다.

1. align-self
   개별 아이템의 수직(열) 정렬
   (stretch, center, start, end)

   .stretch {
     align-self: stretch;
   }
   .center {
     align-self: center;
   }
   .start {
     align-self: start;
   }
   .end {
     align-self: stretcendh;
   }

2. justify-self
   개별 아이템의 수평(행) 정렬
   (stretch, center, start, end)

   .stretch {
     align-self: stretch;
   }
   .center {
     align-self: center;
   }
   .start {
     align-self: start;
   }
   .end {
     align-self: stretcendh;
   }

3. place-self
   align-self와 justify-self의 단축 속성

   .place-self {
     place-self: center end;
   }

order

아이템의 배치 순서를 지정할 수 있다.

.item:nth-child(1) {
  order: 4;
}
.item:nth-child(2) {
  order: 3;
}
.item:nth-child(3) {
  order: 2;
}
.item:nth-child(4) {
  order: 1;
}

grid

여러 그리드 관련 속성을 한 번에 설정할 수 있는 단축 속성이다.

.container {
  display: grid;
  grid: auto-flow dense / 40px 40px 1fr;
}

재미있게 공부하기

grid garden
Grid attack

codepip