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

CSS[7] Explicit vs Implicit Grid

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


CSS 그리드 레이아웃은 명시 적 그리드와 암시 적 그리드 의 개념을 사용합니다 . 이것은 그리드를 생성 할 때 알아야 할 핵심 개념입니다. 그렇지 않으면 예상치 못한 행이나 열이 나타날 수 있습니다.

명시 적 대 암시 적 그리드
명시 적 및 암시 적 그리드

명시 적 그리드는 당신이 함께 정의 그리드입니다 grid-template-rows, grid-template-columns그리고 grid-template-areas속성.

그러나 명시 적으로 정의 된 격자에 맞지 않는 요소를 여전히 가질 수 있습니다. 예를 들어, 6 개의 그리드 아이템에만 맞을 수있는 그리드를 정의한다고 가정하겠습니다. 그리드 컨테이너는 실제로 9 개의 그리드 아이템을 포함합니다. 명시된 그리드에는 6 개의 항목 만 들어가고 3 개는 남게됩니다. 이것은 암시 적 그리드가 들어오는 곳입니다.

암시 그리드 자동 격자 항목 명시 격자의 외부에 위치 될 때마다 그리드 컨테이너에 의해 생성된다. 표 컨테이너는 암시 적 그리드 선 을 그리드 에 추가하여 암시 적 그리드 트랙 을 생성 합니다. 이 행은 명시 적 격자와 함 2 암시 적 그리드를 형성합니다.

ere's an example:

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid { 
  display: grid;
  grid-template-rows: 60px 60px;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  }
#grid > div {
  padding: .5em;
  background: gold;
  text-align: center;
}
</style>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

이 예에서는 명시 적으로 두 개의 행과 두 개의 열을 정의합니다. 이것은 네 개의 그리드 아이템에 맞을 것이다. 그러나 여섯 개의 격자 항목이 있으므로 두 개의 추가 항목을 수용하기 위해 암시 적 격자가 만들어졌습니다.

이것은 좋은 일입니다. 암시 적 그리드가 작성되지 않은 경우, 두 개의 추가 항목이 그리드를 완전히 엉망으로 만들 것입니다.

암시 적 그리드에 트랙 크기 설정

여분의 행이 앞의 두 행만큼 크지 않음을 알 수 있습니다. 이는 grid-template-rows속성을 사용하여 행 높이를 설정했기 때문에 명시 적 눈금의 행에만 적용됩니다 . 암시 적 그리드 의 행 높이는 grid-auto-rows속성을 사용하여 설정해야 합니다. 그러나 우리가 이것을하지 않았기 때문에 암묵적인 행은 트랙 크기 auto(내용 기반)를 사용합니다.

다음은 트랙 크기 조정 속성이 적합한 방법입니다.

명시 적 및 암시 적 트랙 사이징
명시 적 그리드 트랙 크기 조정 속성과 암시 적 그리드 트랙 크기 지정 속성

이렇게 그것은 이것 같이이다 :

다음 예제에서는 명시 적 행과 함축 행을 모두 동일한 높이 ( 60px)로 만듭니다. 그래서 grid-auto-rows암시 적으로 생성 된 행의 높이를 설정 하는 속성을 추가합니다 .

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid { 
  display: grid;
  grid-template-rows: 60px 60px;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  grid-auto-rows: 60px;
  }
#grid > div {
  padding: .5em;
  background: gold;
  text-align: center;
}
</style>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>


행 대 열 간의 자동 흐름

지금까지 추가 그리드 항목을 수용 할 수 있도록 추가 행이 작성되었습니다. 그러나 여분의 열을 대신 사용하려면 어떻게해야할까요?

이 grid-auto-flow속성을 사용하여 수행 할 수 있습니다 .

이 속성을 사용하면 자동 배치 항목에 행이나 열을 사용할 것인지 여부를 지정할 수 있습니다. 즉, 암시 적 그리드가 행 또는 열을 증가 시킬지 여부를 지정할 수 있습니다. 초기 값은 row위의 예에서 열 대신 행이 추가 된 이유를 설명하기위한 것입니다.

열을 사용하려면 다음과 같이하십시오.

grid-auto-flow : columns;

이렇게하면 여분의 항목이 행 대신 암시 적 열에 배치됩니다.

첫 번째 예제에 적용하면 다음과 같이됩니다.

what happens when we apply that to the first example:

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid { 
  display: grid;
  grid-template-rows: 80px 80px;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  grid-auto-flow: column;
  }
#grid > div {
  padding: .5em;
  background: gold;
  text-align: center;
}
</style>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

물론 grid-auto-columns자동 생성 된 열의 너비를 변경 하려면이 속성을 사용할 수 있습니다 . 위의 모든 열을 동일한 너비로 만들려면 사용하십시오 grid-auto-columns: 1fr.

dense키워드

이 grid-auto-flow속성에는 dense그리드를 작게 유지하고 모눈 항목의 크기가 일치하지 않기 때문에 많은 간격을 방지하는 데 도움 이되는 선택적 키워드가 있습니다.

예를 들어 그리드를 다음과 같이 설정할 수 있습니다.

스파 스 그리드 - '고밀도'키워드 없음
그리드의 예 없이dense 키워드.

다음과 같은 격자에 :

밀도가 높은 그리드 - 'dense'키워드 사용
그리드의 예 와dense 키워드.

이 키워드를 사용하면 항목이 순서대로 표시되지 않을 수 있습니다 (이후 항목이 이전에 표시되었던 간격을 다시 채울 수 있기 때문에 모든 상황에 맞지 않습니다).

grid-auto-flow이것에 대한 자세한 정보를 확인하십시오 .

728x90
저작자표시 동일조건

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

CSS[11] 그리드 항목 계층화  (0) 2018.12.22
CSS[10] 그리드 정렬 (9가지)  (0) 2018.12.21
CSS[9] 자동 배치가있는 양식 레이아웃  (0) 2018.12.21
CSS[8] 그리드 항목 배치  (0) 2018.12.21
CSS[6] 그리드안에 그리드 넣기  (0) 2018.12.21
CSS[5] 반응 형 그리드 생성  (0) 2018.12.20
CSS[4] 그리드로 웹 사이트 레이아웃 만들기  (0) 2018.12.20
CSS[3] 그리드 레이아웃 소개  (0) 2018.12.19

관련글

댓글

티스토리툴바