CSS3 : Grid 레이아웃 4부 그리드 순서, 정렬, 흐름 설정

https://webty.tistory.com/152?category=880488 

CSS3 : Grid 레이아웃 1부 grid와 행/열 크기 구성법

https://webty.tistory.com/154?category=880488 

CSS3 : Grid 레이아웃 2부 그리드 템플릿 + 속기형 속성 작성법

https://webty.tistory.com/155?category=880488 

CSS3 : Grid 레이아웃 3부 그리드 아이템 배치

 

---

 

 

그리드 ) HTML & CSS 준비하기

* 실제 배치 item 개수와는 관계없이 제작하려는 레이아웃에 맞게 grid-template을 준비합니다.

* 아래 템플릿은 1행(100px) 4열(100px) 배치입니다.

<div id="grid-container">
  <div class="grid-item item1">a</div>
  <div class="grid-item item2">b</div>
  <div class="grid-item item3">c</div>
</div>

#grid-container {
  display:grid;
  grid-template:100px / repeat(4, 100px);
  gap:10px;
}

 

 

ⓘ 그리드 순서 정하기 order

* order 속성을 사용하여 그리드 아이템을 명령한 순서대로 정렬합니다.

 

ⓘ 그리드 Order 적용 예시

* - + 모두 사용가능합니다.

* 상대적으로 작은 수부터 먼저 정렬됩니다.

#grid-container .item1 { order:2; }
#grid-container .item2 { order:1; }
#grid-container .item3 { order:0; }

 

 

 

ⓒ 그리드 정렬 justify-content (row)

justify-content * 행(row)축을 기준으로 아이템 트랙을 정렬합니다.	start - container 시작 점 기준 정렬
	center - container 중앙 기준 정렬
	end - container 끝점 기준 정렬
	stretch - container 영역 전체를 채움(기본값)
	space-around - container 좌우 끝 공간 남기고 균등 정렬
	space-between - container 좌우 끝 맞추고 균등 정렬
	space-evenly - space-around와 비슷하나 모든 공간을 동일하게 나눔

HTML & CSS 준비하기

* 실제 배치 item 개수와는 관계없이 제작하려는 레이아웃에 맞게 grid-template을 준비합니다.

* 아래 템플릿은 1행(100px) 3열(100px) 배치입니다.

<div id="grid-container">
  <div class="grid-item item1">a</div>
  <div class="grid-item item2">b</div>
  <div class="grid-item item3">c</div>
</div>

#grid-container {
  display:grid;
  grid-template:100px / repeat(3, 100px);
  gap:10px;
}

ⓒ justify-content : start	ⓒ justify-content : center
ⓒ 그리드 정렬 justify-content : end	ⓒ 그리드 정렬 justify-content : space-around
ⓒ 그리드 정렬 justify-content : space-between	ⓒ 그리드 정렬 justify-content : space-evenly

 

 

 

---

 

 

ⓒ 그리드 정렬 align-content (column)

align-content * 열(column)축을 기준으로 아이템 트랙을 정렬합니다.	start - container 시작 점 기준 정렬
	center - container 중앙 기준 정렬
	end - container 끝점 기준 정렬
	stretch - container 영역 전체를 채움(기본값)
	space-around - container 좌우 끝 공간 남기고 균등 정렬
	space-between - container 좌우 끝 맞추고 균등 정렬
	space-evenly - space-around와 비슷하나 모든 공간을 동일하게 나눔

HTML & CSS 준비하기

* 실제 배치 item 개수와는 관계없이 제작하려는 레이아웃에 맞게 grid-template을 준비합니다.

* 아래 템플릿은 3행(50px) 1열(100px) 배치입니다.

<div id="grid-container">
  <div class="grid-item item1">a</div>
  <div class="grid-item item2">b</div>
  <div class="grid-item item3">c</div>
</div>

#grid-container {
  display:grid;
  grid-template:repeat(3, 50px) / 100px;
  gap:10px; height:300px;
}

ⓒ 그리드 정렬 align-content : start	ⓒ 그리드 정렬 align-content : center
ⓒ 그리드 정렬 align-content : end	ⓒ 그리드 정렬 align-content : space-around
ⓒ 그리드 정렬 align-content : space-between	ⓒ 그리드 정렬 align-content : space-evenly

 

 

---

 

 

ⓘ 아이템 정렬 justify-self (row) / align-self (column)

justify-self * 행(row)축을 기준으로 아이템 내부 콘텐츠를 정렬합니다. ------------------------------------ align-self * 열(column)축을 기준으로 아이템 내부 콘텐츠를 정렬합니다.	start - container 시작 점 기준 정렬
	center - container 중앙 기준 정렬
	end - container 끝점 기준 정렬
	stretch - container 영역 전체를 채움(기본값)

HTML & CSS 준비하기

* 실제 배치 item 개수와는 관계없이 제작하려는 레이아웃에 맞게 grid-template을 준비합니다.

* 아래 템플릿은 2행(100px) 3열(100px) 배치입니다.

<div id="grid-container">
  <div class="grid-item item1">a</div>
  <div class="grid-item item2">b</div>
  <div class="grid-item item3">c</div>
</div>

#grid-container {
  display:grid;
  grid-template:repeat(2, 100px) / repeat(3, 100px);
  gap:10px; justify-content:start;
}
#grid-container .grid-item {width:50%; height:50%;}

ⓘ justify-self : start	ⓘ  justify-self : end
ⓘ  justify-self : center

ⓘ align-self : start	ⓘ  align-self : end
ⓘ  align-self : center

 

 

 

---

 

 

 

ⓒ 그리드 자동 흐름 (auto-flow)

* 그리드에 명시적으로 배치되지 않은 아이템이 있을 경우 자동 흐름 방향을 설정하여 배치되도록 할 수 있습니다.

 

HTML & CSS 준비하기

<div id="grid-container">
  <div class="grid-item item1">a</div>
  <div class="grid-item item2">b</div>
  <div class="grid-item item3">c</div>
</div>

#grid-container {
  display:grid;
}

 

 

ⓒ  grid-auto-flow:column

#grid-container {
  display:grid;
  grid-auto-flow:column;
}

 

 

ⓒ  grid-auto-flow:dense (밀집하게 container 빈 공간을 채우는 모드)

#grid-container {
  display:grid;
  grid-auto-flow:dense;
}
#grid-container .item1 { grid-area:1/1/1/5; }
#grid-container .item2 { grid-row:1/3; }

 

 

ⓒ  grid-auto-flow:row (기본값)

#grid-container {
  display:grid;
  grid-auto-flow:row;
}