TIL8 - CSS grid
프로젝트를 진행하면서 float를 이용하여 레이아웃 배치를 해보았다.
어느정도 이해가 될 법하니 이제는 CSS 레이아웃의 왕중의 왕 grid를 사용해보고 싶었다.
Grid는 2차원 레이아웃 시스템으로 두 방향(가로-세로)를 조작할 수 있기 때문에 더 복잡한 레이아웃 표현이 가능한 시스템이다.
Grid 레이아웃을 만들기 위해 필요한 기본적인 요소는 두 가지가 있다.
- container
- item
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
용어
- Grid container : item을 감싸는 부모 container를 의미한다.
- Grid item : 부모 container 안에 있는 자식 요소를 의미한다.
- Grid track : 그리드의 행 또는 열
- Grid cell : Grid의 한 칸. 즉, Grid 안에 있는 한 개의 html 요소이다.
- Grid Line : Grid-cell을 구분짓는 선이다.
- Grid Number : Grid-Line의 각 번호
- Grid Gap : Grid 셀 사이의 간격
- Grid Area : Grid 셀들의 집합.
속성들
Grid의 속성들은 크게 두 가지로 구분할 수 있다.
- container에 적용하는 속성
- item에 적용하는 속성
container에 적용하는 속성
display: grid
grid-template-rows
/grid-template-columns
row-gap
/column-gap
grid-auto-columns
/grid-auto-rows
grid-template-areas
grid-auto-flow
align-items
justify-items
align-content
justify-content
display: grid
Grid container에 적용하는 속성으로, 그리드 시스템을 사용하려면 꼭 적용해줘야 한다.
.container {
display: grid;
}
grid-template-rows / grid-template-columns - 그리드 형태 정의
container에 Grid track의 크기를 지정해주는 속성이다.
- grid-template-rows : 행의 배치(높이 지정)
- grid-template-columns : 열의 배치 (너비 지정)
grid-template-rows: 100px 100px 300px;
grid-template-columns: 1fr 2fr 1fr;
위의 속성을 선언하면 3줄의 row를 각각 100px, 100px, 300px로 만들고 column의 크기를 1:2:1의 비율로 설정하겠다는 의미이다.
repeat 함수와 minmax 함수
row와 column의 크기를 설정할때 사용하는 함수들이다.
- repeat(반복횟수, 반복값) : 반복되는 값을 자동으로 처리
grid-template-columns : repeat(5, 200px);
repeat 함수로 200px인 크기의 열이 5개 만들어진다.
- minmax(최솟값, 최댓값) : 최솟값과 최댓값을 지정
grid-template-columns: repeat(5, 200px);
grid-template-rows: repeat(3, minmax(200px, auto));
내용의 양이 그리드 행의 크기보다 작더라도 최소한 200px는 유지하도록 하고, 내용이 많아서 200px가 넘어가면 크기가 자동으로 늘어난다.
item에 적용하는 속성
grid-column-start
/grid-column-end
/grid-column
/grid-row-start
/grid-row-end
/grid-row
align-self
justify-self
place-self
order
z-index
Author And Source
이 문제에 관하여(TIL8 - CSS grid), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@silviaoh/TIL-CSS-grid저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)