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

CSS[8] 그리드 항목 배치

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

그리드 항목을 그리드에 배치하는 방법을 이해하는 것은 CSS 그리드 레이아웃을 사용하여 작업 할 때 중요합니다.

그리드 항목이 그리드에 배치되는 방식을 완전히 이해하지 못하면 결국 몇 초 정도 걸리는 작업을 수행하는 데 많은 시간을 낭비하게됩니다.

다행히도 파악하기 어려운 개념은 아닙니다. 기본적으로 모든 것이 그리드 선으로 바뀝니다 .

눈금 선과 궤도
그리드 선은 파선 오렌지 선으로 표시됩니다. 이 예제는 왼쪽에서 오른쪽 쓰기 모드 (예 : 영어) 용입니다. 아랍어와 같이 오른쪽에서 왼쪽 쓰기 모드의 경우 열은 격자 컨테이너의 오른쪽에서 시작됩니다.

그리드 선은 그리드의 수평 및 수직 분할 선입니다. 각각의 행 및 열은 양쪽의 격자 선 (이러한로도 지칭 될 수있다 갖는 로우 라인 과 컬럼 라인 ). 각 그리드 선은 그리드 항목을 배치 할 때 참조 할 수있는 숫자 인덱스를 가지고 있습니다.

그리드에 배치 된 항목
그리드 항목은 그리드에 배치됩니다.

위의 예에서 첫 번째 그리드 항목은 행 1 행과 열 1에서 시작합니다. 행 2와 행 2에서 끝납니다. 두 번째 모눈 항목은 행 3과 행 2에서 시작됩니다. 행 4 및 열 4 행.

이 작업은 다음 코드를 사용하여 수행 할 수 있습니다.

This can be done with the following code:

#item1 {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: 2;
  }
#item2 {
  grid-row-start: 3;
  grid-column-start: 2;
  grid-row-end: 4;
  grid-column-end: 4;  
  }

Here's a working example:

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-rows: 50px 1fr 80px;
  grid-template-columns: 120px 1fr 80px;
  grid-gap: 5px;
  height: 90vh;
}
#grid > div {
  background-color: #66CC00;
}
#item1 {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: 2;
  }
#item2 {
  grid-row-start: 3;
  grid-column-start: 2;
  grid-row-end: 4;
  grid-column-end: 4;  
  }
</style>
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
</div>

이 경우 첫 번째 그리드 항목에 최종 값을 지정할 필요가 없습니다. 어쨌든 1 개의 트랙에만 적용되기 때문입니다. 두 번째 항목의 끝 줄 행에 대해서도 마찬가지입니다. 기본적으로 끝 줄을 지정하지 않으면 1 줄만 표시됩니다.

사실, 우리는 지정하지 않은 모든 그것이 어쨌든 했 정확한 위치에있어, 제 그리드 항목에 대한 위치를. 그러나 두 번째 항목 에 대한 위치 지정을 수행하지 않은 경우 첫 번째 행의 항목 1 옆에 앉아서 한 트랙 만 표시합니다.

명명 된 그리드 선

더 쉽게 참조 할 수 있도록 이러한 그리드 선에 대해 고유 한 이름을 만들 수도 있습니다. grid-template-rows및을 사용하여 이름을 지정할 수 있습니다 grid-template-columns. 이렇게 :


#grid {
  display: grid;
  /* Set the tracks and name the lines */
  grid-template-rows: [row1-start] 50px [row2-start] 1fr [row3-start] 80px [row3-end];
  grid-template-columns: [col1-start] 120px [col2-start] 1fr [col3-start] 80px [col3-end];
  grid-gap: 5px;
  height: 90vh;
}
...
​
/* Now refer to those named lines */
#item2 {
  grid-row-start: row3-start;
  grid-column-start: col2-start;
  grid-row-end: row3-end;
  grid-column-end: col3-end;  
  }

명명 된 행은 명시 적이거나 내재적 일 수 있습니다. 속성을 사용하여 명명 된 모눈 영역을 만들 때마다 암시 적으로 명명 된 선 이 만들어집니다 grid-template-areas. 이름은 모눈 영역에서 가져 -start오거나 -end추가됩니다 (시작 선인지 끝선인지에 따라).

따라서 명명 된 각 명명 된 격자 영역에 대해 header네 개의 암시 적 이름이 지정된 행이 만들어집니다. header-start이름이 지정된 그리드 영역의 행 시작 및 열 시작 행에 이름이 지정된 두 개의 행과 이름이 지정된 행 영역 header-end의 행 끝 및 행 끝 행에 두 개의 이름이 지정된 행.

명명 된 그리드 영역

모눈 영역의 grid-template-areas속성은 모눈 컨테이너 의 속성을 사용하여 명시 적으로 지정할 수 있습니다 . 웹 사이트 레이아웃을 만들 때 이전에했던 일 입니다.

요약하면 다음과 같습니다.

To recap, it goes something like this:

#grid { 
  display: grid;
  /* Name the grid areas */
  grid-template-areas: 
    "a a"
    "b c";
    ...
    }
​
...
​
/* Now apply each grid item to a named grid area  */
#a {
  grid-area: a;
}
#b {
  grid-area: b;
}
#c { 
  grid-area: c;      
  }

.사이에 공백없이 전체 중지 ( ) 또는 일련의 전체 정지를 사용하여 빈 셀을 지정할 수 있습니다 .

You can specify an empty cell by using a full stop (.) or series of full stops with no space in between.

For example:

grid-template-areas: 
  "a a"
  ". b";

Or:

grid-template-areas: 
  "header header"
  "... content";

그리드 배치 속성

위의 예제에서 다루는 길이 표 배치 특성 대신 사용할 수있는 세 가지 약식 특성이 있습니다. 그들이 모두 들어 맞는 곳입니다.

grid-area
이 속성은 다음 속성에 대한 속기입니다.
grid-column
이 속성은 다음 속성에 대한 속기입니다.
grid-column-start
그리드 항목이 시작되는 열의 행과 그 행이 몇 개의 트랙에 걸쳐 있는지를 지정합니다.
grid-column-end
그리드 아이템이 끝나는 열 라인과 그 라인이 몇 개의 트랙에 걸쳐 있는지를 지정합니다.
grid-row
이 속성은 다음 속성에 대한 속기입니다.
grid-row-start
격자 항목이 시작되는 행 줄과 줄 수를 지정합니다.
grid-row-end
그리드 아이템이 끝나는 행 라인과 그 라인이 몇 개의 트랙에 걸쳐 있는지를 지정합니다.

명시 적 대 암시 적 그리드를grid-auto-flow 논의 할 때 언급 한 속성을 사용할 수도 있습니다 . 그리드에 자동 배치 그리드 항목을 배치하는 방법을 지정합니다. 자동 배치 항목은 위의 배치 속성 중 하나를 사용하여 명시 적으로 배치되지 않은 항목입니다.


728x90
저작자표시 동일조건

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

CSS[12] 눈금으로 절대 위치 지정  (0) 2018.12.22
CSS[11] 그리드 항목 계층화  (0) 2018.12.22
CSS[10] 그리드 정렬 (9가지)  (0) 2018.12.21
CSS[9] 자동 배치가있는 양식 레이아웃  (0) 2018.12.21
CSS[7] Explicit vs Implicit Grid  (0) 2018.12.21
CSS[6] 그리드안에 그리드 넣기  (0) 2018.12.21
CSS[5] 반응 형 그리드 생성  (0) 2018.12.20
CSS[4] 그리드로 웹 사이트 레이아웃 만들기  (0) 2018.12.20

관련글

댓글

티스토리툴바