/ 속성 - Grid
CSS / Grid
Grid는 2차원(행과 열)의 레이아웃 시스템을 제공한다.
CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈
Grid Properties
CSS Grid는 CSS Fles와 같이 Container와 Item이라는 두가지 개념으로 두분되어 있다.
Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있다.
Grid Containers
display
Grid Container를 정의한다.
정의된 컨테이너의 자식 요소들은 자동으로 Grid Items로 정의된다.
그리드를 사용하기 위해 컨테이너에 필수로 작성한다!
값 | 의미 |
---|---|
grid | Block 특성의 Grid Container 정의 |
inline-grid | Inline 특성의 Grid Container 정의 |
.container {
display: grid;
}
grid-template-rows
명시적 행의 크기를 정의한다.
동시에 라인의 이름도 정의할 수 있다.
fr
(fraction, 공간 비율) 단위를 사용할 수 있다.
repeat()
함수를 사용할 수 있다.
.container {
display: grid;
grid-template-rows: 1행크기 2행크기 ...;
grid-template-rows: [선이름] 1행크기 [선이름] 2행크기 [선이름] ...;
}
/* 각 행의 크기를 정의합니다. */
.container {
grid-template-rows: 100px 200px;
}
/* 동시에 각 라인의 이름도 정의할 수 있습니다. */
.container {
grid-template-rows: [first] 100px [second] 200px [third];
}
/* 라인에 중복된 이름을 지정할 수 있습니다. */
.container {
grid-template-rows: [row1-start] 100px [row1-end row2-start] 200px [row2-end];
}
꼭 필요한 경우가 아니면 라인의 이름을 정의하지 않기도 한다.
grid-template-columns와 동일하다.
grid-template-areas
지정된 그리드 영역 이름(grid-area
)을 참조해 그리드 템플릿을 생성한다.
grid-area 는 Grid Container가 아닌 Grid Item에 적용하는 속성이다.
.container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer";
}
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
row-gap(grid-row-gap)
각 행과 행 사이의 간격을 지정한다.
그리드 선의 크기를 지정한다고 표현할 수 있다.
.container {
row-gap: 크기;
}
column-gap(grid-column-gap)
각 열과 열 사이의 간격을 지정한다.
.container {
column-gap: 크기;
}
gap(grid-gap)
각 행과 행, 열과 열 사이의 간격을 지정한다.
.container {
gap: <grid-row-gap> <grid-column-gap>;
}
.container {
display: grid;
grid-template-rows: repeat(2, 150px);
grid-template-columns: repeat(3, 1fr);
gap: 20px 10px;
}
/* 하나의 값으로 통일할 수 있습니다. */
.container {
gap: 10px; /* row-gap: 10px; + column-gap: 10px; */
}
/* 하나의 값만 적용하고자 한다면 다음과 같이 사용할 수 있습니다. */
.container {
gap: 10px 0; /* row-gap */
gap: 0 10px; /* column-gap */
}
grid-auto-rows
암시적 행의 크기를 정의한다.
Item이 grid-template-rows
로 정의한 명시적 행 외부에 배치되는 경우 암시적 행의 크기가 적용된다.
grid-auto-columns
암시적 열의 크기를 정의한다.
Item이 grid-template-columns
로 정의한 명시적 행 외부에 배치되는 경우 암시적 열의 크기가 적용된다.
.container {
width: 300px;
height: 200px;
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 150px 150px;
grid-auto-rows: 100px;
grid-auto-columns: 100px;
}
.item:nth-child(3) {
grid-row: 3 / 4;
grid-column: 3 / 4;
}
암시적 크기가 적용된 행과 열은 양수 라인 번호만 사용할 수 있고 음수는 사용이 불가능!
grid-auto-flow
배치하지 않은 Item을 어떤 방식의 '자동 배치 알고리즘'으로 처리할 지 정의한다.
배치한 아이템은
grid-area
를 사용한 아이템을 의미
값 | 의미 | 기본값 |
---|---|---|
row | 각 행 축을 따라 차례로 배치 | row |
column | 각 열 축을 따라 차례로 배치 | |
row dense | 각 행 축을 따라 차례로 배치, 반 영역 메움! | |
column dense | 각 열 축을 따라 차례로 배치, 반 영역 메움! |
/* For row & row dense */
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row || row dense || dense;
}
.item:nth-child(2) {
grid-column: span 3;
}
/* For column & column dense */
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column || column dense;
}
.item:nth-child(1) {
grid-column: 2 / span 2;
}
.item:nth-child(2) {
grid-column: span 2;
}
repeat() 함수는 2번째 인수를 반복하기 뛰문에 다음과 같이 활용할 수 있다.
.container {
grid-template-columns: repeat(4, 100px 200px 50px);
/* grid-template-columns: 100px 200px 50px 100px 200px 50px 100px 200px 50px 100px 200px 50px; */
}
.container {
grid-template-columns: repeat(4, 1fr 2fr 3fr);
/* grid-template-columns: 1fr 2fr 3fr 1fr 2fr 3fr 1fr 2fr 3fr 1fr 2fr 3fr; */
}
Author And Source
이 문제에 관하여(/ 속성 - Grid), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wlrhkd49/CSS-속성-Grid저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)