[css] display: grid - 05. track-list 에 대해서

[css] grid 로 리스트 배열하기.

1. 리스트들의 부모 Element 를 Grid Container로 만든다.

2. 몇 행 몇 열을 만들건지 정의 합니다.

가. grid-template-columns /rows 를 사용한다.

  가-1. grid-template-columns 속성 값은 Track-list 인데 Track-list에 대해서 알아야 사용 할 수 있습니다.

(이게 맞는 표현인지는 모르겠습니다. 혹시 표현이 잘 못 되었다면 정정 코멘트 부탁 드립니다.)

 

지난 포스팅에 이어서 Track-list에 대해서 마무리를 하겠습니다.

 

 

w3g.org 사이트의 설명을 이해하기에는 어려운것 같아서 css-tricks.com 여기 사이트의 내용을 정리를 해보려고 합니다.

css-tricks.com 에서 아래와 같이 설명이 되어 있습니다. 

 

grid-template-columns
grid-template-rows

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

값은 track-size를 나타 내고 빈 공간은 그리드 선을 나타 낸다. 라고 나왔는데,

아래의 css 를 보면서 위에 말이 무슨 말인지 설명을 해 보겠습니다. 

 

.grid-container {
    grid-template-columns:  30% 40% 30%;
}

 

30% 과 40% 30% 이 track-size 입니다. (단위는 px, em 도 됩니다)

(30%, 40%,30% 가 값이니간 track-size 겟죠? 왜 값이냐고 물어보시면 ... 더 설명을 못 해드릴것 같습니다.;;)

 

track 이 지난번 포스팅에서 grid-colum/row 인 것을 알았으니간 width가 각 각 30%, 40%, 30% 인  grid-colum 3개를 만든 것을 알 수 있습니다.

 

그리고 위에 설명에서 빈공간은 grid 선을 나타 낸다고 하였는데요, 

어디가 빈 공간이냐 하면 

grid-template-columns:   30%  40%   30%   ;

파랗게 칠한 공간이 빈 공간 이고 line 입니다.

 

https://sh-sida.tistory.com/74 포스팅에서 line에 대해서 포스팅을 했었는대요,

 

line 에 명시적으로 이름을 줄 수가 있다고 나와있고,  아래 처럼 쓸 수 있습니다.

(아래는 제가 임의로 라인 이름 [line-name1] ~ 4 까지 작명을 했지만 이름은 마음대로 지을 수 있습니다.)

 

.grid-container { 
     grid-template-columns: [line-name1]30%[line-name2]40%[line-name3]30%[line-name4];
}

 

아래 codepen에서 html, css 소스를 확인 하실 수 있습니다.

 

See the Pen grid : line-name 예제 by sanghwanAN (@sanghwanAN) on CodePen.

 

grid line에 대해서 아래에 사이트에서 자세하게 설명이 되어져 있는대요,

더 자세한 글은 아래의 사이트에서 확인 부탁 드립니다.

 

https://mastery.games/post/naming-css-grid-lines/

Mastery Games

 

 

참고사이트 :

 w3g.org

CSS Grid Layout Module Level 1

 

css-tricks.com

A Complete Guide to Grid | CSS-Tricks

 

그밖의 display 속성 정리 포스팅 글

https://sh-sida.tistory.com/category/html%2C%20css/css-display%EC%86%8D%EC%84%B1%EB%93%A4%20%EC%A0%95%EB%A6%AC

'html, css/css-display속성들 정리' 카테고리의 글 목록