본문 바로가기
디자인/HTML, CSS, JS

CSS[10] 그리드 정렬 (9가지)

by 코코리★ 2018. 12. 21.
728x90

다음은 그리드 컨테이너와 그리드 아이템에 적용 할 수있는 다양한 정렬 속성의 개요입니다.

일반적으로 대부분의 정렬 속성은 다른 요소와 마찬가지로 그리드 항목에서 동일한 방식으로 작동합니다. 그러나 그리드와 플렉스 박스에 특별히 적용되는 정렬 속성도 있습니다. 여기에 개요가 있습니다.

align-items속성

이 align-items속성 align-self은 모눈 컨테이너의 서식 지정 컨텍스트에 참여하는 모눈 항목 의 기본값을 지정합니다 .

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 10px;
  align-items: center;
  background-color: beige;
}
​
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  height: 40%;
}
.green {
  background: yellowgreen;
  height: 60%;
}
.blue {
  background: steelblue;
  height: auto;
}
body {
  margin: 0;
}
</style>
​
<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

이 예에서는 align-items: center그리드 컨테이너에 적용 되므로 모든 그리드 항목은 블록 축의 중심에 정렬됩니다.

그러나 이것이 기본 설정이기 때문에 어떤 그리드 아이템도 이것을 align-self속성으로 오버라이드 할 수 있습니다 .

align-self속성

이 align-self속성은 블록 / 열 / 교차 축을 따라 포함하는 블록 내의 상자를 정렬합니다.


 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 10px;
  align-items: center;
  background-color: beige;
}
​
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  height: 40%;
  align-self: baseline;
}
.green {
  background: yellowgreen;
  height: 60%;
}
.blue {

여기에서 빨간색 눈금 항목에는 값이 baseline있고 파란색 항목에는 값이 stretch있습니다. 파란색 항목의 높이는 auto그리드 영역의 전체 높이를 차지하도록 늘어납니다.

그러나 녹색 항목에 대한 값을 설정하지 않았습니다. 따라서 기본값 (이 경우 그리드 컨테이너 center의 align-items에 의해)이 사용 됩니다.

justify-items속성

이 justify-items속성 justify-self은 모눈 컨테이너의 서식 지정 컨텍스트에 참여하는 모눈 항목 의 기본값을 지정합니다 .

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  justify-items: center;
  background-color: beige;
}
​
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
  width: 20%;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}
</style>
​
<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

The justify-self Property

The justify-self property can be used to align an individual grid item along the inline/row/main axis.

justify-self속성

이 justify-self속성을 사용하여 인라인 / 행 / 주 축을 따라 개별 그리드 항목을 정렬 할 수 있습니다.

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  justify-items: center;
  background-color: beige;
}
​
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
  width: 20%;
}
.red {
  background: orangered;
  justify-self: end;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
  justify-self: start;
}
</style>
​
<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

The justify-content Property

The justify-content property aligns the grid container's contents as a whole along the main/inline axis.

This can be used for aligning the whole grid within the grid container, in the event that the grid tracks take up less space than their grid container. This can happen if you set the track size with an absolute unit (such as pixels), while the grid container takes up more space than all the tracks combined.

justify-content속성

이 justify-content속성은 모눈 컨테이너의 내용을 주 / 인라인 축을 따라 전체적으로 정렬합니다.

그리드 트랙이 그리드 컨테이너보다 적은 공간을 차지하는 경우 그리드 컨테이너 내의 전체 그리드를 정렬하는 데 사용할 수 있습니다. 이것은 절대 단위 (예 : 픽셀)로 트랙 크기를 설정하는 경우 그리드 컨테이너가 결합 된 모든 트랙보다 더 많은 공간을 차지하는 경우 발생할 수 있습니다.

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 100px;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  justify-content: center;
  background-color: beige;
}
​
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  width: 20px;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
  width: 40px;

The align-content Property

The align-content property is the same as justify-content, except that this property aligns along the cross/block axis.

align-content속성

이 align-content속성은 justify-content교차 / 블록 축을 따라 정렬된다는 점을 제외하고는 속성은와 같습니다.

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px;
  grid-gap: 10px;
  align-content: center;
  background-color: beige;
  height: 100vh;
}
​
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  height: 20px;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
  height: 40px;
}
body {
  margin: 0;
}
</style>
​
<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Shorthand Properties

The place-content Property

The place-content property is shorthand for justify-content and align-content.


속기 속성

place-content속성

이 place-content속성은 justify-content및에 대한 속기입니다 align-content.

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 60px 60px 60px;
  grid-template-rows: 100px;
  grid-gap: 10px;
  place-content: center end;
  background-color: beige;
  height: 100vh;
}
​
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  height: 20px;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;

The place-items Property

The place-items property is shorthand for justify-items and align-items.

place-items속성

이 place-items속성은 justify-items및에 대한 속기입니다 align-items.

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 10px;
  place-items: end center;
  background-color: beige;
}
​
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  height: 40%;
}
.green {
  background: yellowgreen;
  height: 60%;
}
.blue {
  background: steelblue;

The place-self Property

The place-self property is shorthand for justify-self and align-self.

place-self속성

이 place-self속성은 justify-self및에 대한 속기입니다 align-self.

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 10px;
  background-color: beige;
}
​
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  height: 40%;
  place-self: end;
}
.green {
  background: yellowgreen;
  height: 60%;
  place-self: start center;
}
.blue {


728x90
저작자표시 동일조건

'디자인 > HTML, CSS, JS' 카테고리의 다른 글

CSS[14] 그리드 레이아웃을위한 브라우저 지원  (0) 2018.12.23
CSS[13] 그리드 인스펙터 사용하기  (0) 2018.12.22
CSS[12] 눈금으로 절대 위치 지정  (0) 2018.12.22
CSS[11] 그리드 항목 계층화  (0) 2018.12.22
CSS[9] 자동 배치가있는 양식 레이아웃  (0) 2018.12.21
CSS[8] 그리드 항목 배치  (0) 2018.12.21
CSS[7] Explicit vs Implicit Grid  (0) 2018.12.21
CSS[6] 그리드안에 그리드 넣기  (0) 2018.12.21

관련글

댓글

티스토리툴바