-
[css] display: grid - 02.용어정리(Columns & Rows / Coloumn Gap & Row Gap / Coloumn Line & Row Line)html, css/css-display속성들 정리 2020. 6. 20. 11:56반응형
먼저 grid 속성에 관련된 기본적인 용어부터 정리를 하겠습니다.
용어를 알아야 하는 이유는 관련 용어를 컨트롤 하기 위해서는
용어에 관련된 grid 속성을 알아야 하기 때문 입니다.
아래의 사이트 내용을 정리 하였습니다..CSS Grid Layout
CSS Grid Layout Module Header Menu Main Right Footer Try it Yourself » Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without
www.w3schools.com
Columns & Rows
grid의 기본 Coloumn 과 Row에 대해서 알아보겠습니다.
아래의 3행 3열의 리스트 이미지가 있습니다.
Grid - Column / Grid - Row 리스트에서 세로 줄 라인에 리스트 들을 Column, 가로 줄 라인을 Row 라 합니다.
Gaps
Gap 이라는 것이 있는데, 아래의 이미지를 보면 아시겠지만
Css로 Column Gap 과 Row Gap의 간격 크기를 컨트롤 할 수 있습니다.
관련 css 속성은 grid-column-gap, grid-row-gap, grid-gap 이 있습니다.
관련 예제는 아래의 링크를 확인 부탁 드립니다.
(예제 사이트에 들어가서 한번 css 를 만져 보시는걸 추천 합니다. 그러면 더 이해가 잘 될 겁니다.)
w3schools : grid-column-gap 예제 보기
w3schools : grid-row-gap 예제 보기
w3schools : grid-gap 예제 보기Tryit Editor v3.6
.grid-container { display: grid; grid-gap: 50px 100px; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-siz
www.w3schools.com
Lines
Grid에 Line이라는 것이 있는대, 각 Line에는 순서가 있습니다.
순서는 아래의 이미지를 보면 확인 할 수 있습니다.
당연히 Coloumn Line 과 Row Line 이 있는대요,
위 이미지를 보면 알겠지만 Coloumn Line 은 column 시작점인 왼쪽 부터 1번이 되고,
Row Line은 Row 시작점인 위에서 부터 1번이 됩니다.
Grid Line을 기준으로 그리드 아이템을 배치 할 수 가 있는대
,
관련 css 속성은 grid-column-start, grid-column-end, grid-row-start, grid-row-end 이 있습니다.관련 예제는 아래의 링크를 확인 부탁 드립니다.
(예제 사이트에 들어가서 한번 css 를 만져 보시는걸 추천 합니다. 그러면 더 이해가 잘 될 겁니다.)
w3schools : grid-column-Line 예제 보기
w3schools : grid-row-Line 예제 보기Tryit Editor v3.6
.grid-container { display: grid; grid-template-columns: auto auto auto; grid-gap: 10px; background-color: #2196F3; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; }
www.w3schools.com
그밖의 display 속성 정리 포스팅 글
'html, css/css-display속성들 정리' 카테고리의 글 목록
현재 프리랜서로 프로젝트를 하고 있는 웹퍼블리셔 입니다. 프로젝트하면서 알게된 것들 공부하면서 알게 된 것들을 정리 하고 있습니다.
sh-sida.tistory.com
'html, css > css-display속성들 정리' 카테고리의 다른 글
display: grid - 04. Grid Tracks / Cells /track-list 용어 정리, grid-template-columns /rows 사용법에 대해서 (0) 2020.07.18 [css] display: grid - 03. grid로 리스트 배열 하기( Grid Container) (2) 2020.07.04 [css] display: grid - 01.gird 속성을 사용해야하는 이유 및 장점 / subgrid에 대해서 / 브라우저 지원 범위에 대해서 (0) 2020.05.11 display : flex 에대해서 - 2.flex-grow, flex-basis (0) 2019.04.09 display : flex 에대해서 - 1.flex-wrap (0) 2019.03.09 댓글