CSS Grid 레이아웃
CSS Grid Layout 또는 "Grid"은 과거의 웹 레이아웃 시스템과는 다르게 2차원 그리드 기반 레이아웃 시스템으로 웹 페이지의 사용자 인터페이스를 디자인하는 방식을 완전히 바꾸었습니다. 이전에는 테이블, 플로트, 위치 지정 등 다양한 방법으로 레이아웃을 구성했지만 이러한 방법들은 본질적으로 해킹이었고 몇 가지 중요한 기능이 부족했습니다. 플렉스박스도 유용하지만 단방향 흐름을 가지고 있어 특정 사용 사례에는 한계가 있었습니다. 그리드는 이러한 레이아웃 문제를 해결하기 위해 특별히 만들어진 최초의 CSS 모듈입니다.
부모요소 (Grid Container)
1. display
display 속성은 grid 및 inline-grid 값을 사용하여 요소를 그리드 컨테이너로 정의하고, 해당 내용에 대해 새로운 그리드 서식 맥락을 생성합니다.
.container {
display: grid; /* 또는 inline-grid */
}2. grid-template-columns, grid-template-rows
이 코드는 CSS 그리드의 열과 행을 정의하는 방법을 설명합니다. grid-template-columns 및 grid-template-rows 속성을 사용하여 각각 열과 행을 정의할 수 있습니다.
.container {
grid-template-columns: ... ...;
/* 예시:
1fr 1fr
minmax(10px, 1fr) 3fr
repeat(5, 1fr)
50px auto 100px 1fr
*/
grid-template-rows: ... ...;
/* 예시:
min-content 1fr min-content
100px 1fr max-content
*/
}3. grid-template-areas
이 코드는 grid-template-areas 속성을 사용하여 그리드 영역의 이름을 참조하여 그리드 템플릿을 정의합니다.
.container {
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}4. grid-template
grid-template은 grid-template-rows, grid-template-columns, 및 grid-template-areas를 하나의 선언으로 설정하는 축약형입니다.
.container {
grid-template: none | <grid-template-rows> / <grid-template-columns>;
}5. column-gap, row-gap (또는 grid-column-gap, grid-row-gap)
이 코드는 그리드 라인의 크기를 지정하는 방법을 설명합니다.
.container {
column-gap: <line-size>;
row-gap: <line-size>;
/* 또는 */
grid-column-gap: <line-size>;
grid-row-gap: <line-size>;
}6. gap, grid-gap
gap 및 grid-gap은 row-gap 및 column-gap에 대한 축약형입니다.
.container {
gap: <grid-row-gap> <grid-column-gap>;
/* 또는 */
grid-gap: <grid-row-gap> <grid-column-gap>;
}7. justify-items
justify-items는 그리드 항목을 인라인 축(행)에 따라 정렬합니다.
.container {
justify-items: start | end | center | stretch;
}
8. align-items
align-items는 그리드 항목을 블록 축(열)에 따라 정렬합니다.
.container {
align-items: start | end | center | stretch | baseline;
}
9. place-items
place-items는 align-items 및 justify-items 속성을 동시에 설정합니다.
.center {
display: grid;
place-items: center;
}10. justify-content
justify-content는 그리드를 인라인(행) 축을 따라 정렬합니다.
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
11. align-content
align-content는 그리드를 블록(열) 축을 따라 정렬합니다.
.container {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
12. place-content
place-content는 align-content 및 justify-content 속성을 동시에 설정합니다.
.container {
place-content: <align-content> / <justify-content>;
}13. grid-auto-columns, grid-auto-rows
grid-auto-columns 및 grid-auto-rows는 자동 생성된 그리드 트랙(임시 그리드 트랙)의 크기를 지정합니다.
.container {
grid-auto-columns: <track-size> ...;
grid-auto-rows: <track-size> ...;
}.container {
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px;
}
.item-a {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
.container {
grid-auto-columns: 60px;
}
14. grid-auto-flow
grid-auto-flow는 그리드 항목이 자동으로 배치되는 방식을 지정합니다.
.container {
grid-auto-flow: row | column | row dense | column dense;
}.item-a {
grid-column: 1;
grid-row: 1 / 3;
}
.item-e {
grid-column: 5;
grid-row: 1 / 3;
}
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: column;
}
15. Grid
다음은 단일 선언에서 다음 모든 속성을 설정하는 데 사용되는 축약형입니다: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 그리고 grid-auto-flow (참고: 단일 그리드 선언에서 명시적 또는 암시적 그리드 속성을 지정할 수 있습니다).
grid: none | <grid-template> | <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? | [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>;예시:
다음 두 코드 블록은 동등합니다:
.container {
grid: 100px 300px / 3fr 1fr;
}.container {
grid-template-rows: 100px 300px;
grid-template-columns: 3fr 1fr;
}다음 두 코드 블록은 동등합니다:
.container {
grid: auto-flow / 200px 1fr;
}.container {
grid-auto-flow: row;
grid-template-columns: 200px 1fr;
}다음 두 코드 블록은 동등합니다:
.container {
grid: auto-flow dense 100px / 1fr 2fr;
}.container {
grid-auto-flow: row dense;
grid-auto-rows: 100px;
grid-template-columns: 1fr 2fr;
}마지막으로 다음 두 코드 블록은 동등합니다:
.container {
grid: 100px 300px / auto-flow 200px;
}.container {
grid-template-rows: 100px 300px;
grid-auto-flow: column;
grid-auto-columns: 200px;
}또한, 그리드 영역, 그리드 템플릿 행 및 그리드 템플릿 열을 한 번에 설정하는 더 복잡하지만 편리한 구문도 지원합니다. 이는 그리드 영역과 함께 해당하는 줄 이름과 트랙 크기를 인라인으로 지정하는 것입니다. 이를 예로 설명하는 것이 가장 쉽습니다.
.container {
grid: [row1-start] "header header header" 1fr [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}이는 다음과 동등합니다:
.container {
grid-template-areas:
"header header header"
"footer footer footer";
grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
}자식 요소 (Grid Items)
1. grid-column-start, grid-column-end,
grid-row-start, grid-row-end
그리드 항목의 위치를 특정 그리드 라인을 참조하여 그리드 내에서 결정합니다. grid-column-start/grid-row-start는 항목이 시작하는 라인이고, grid-column-end/grid-row-end는 항목이 끝나는 라인입니다.
값:
<line>: 번호화된 그리드 라인을 참조하기 위해 숫자를 사용하거나, 명명된 그리드 라인을 참조하기 위해 이름을 사용할 수 있습니다.span <number>: 항목은 제공된 수의 그리드 트랙을 가로지를 것입니다.span <name>: 항목은 제공된 이름을 가진 다음 라인에 도달할 때까지 가로지를 것입니다.auto: 자동 배치, 자동으로 채워지는span또는 기본span 1을 나타냅니다.
.item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}예시:
.item-a {
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start;
grid-row-end: 3;
}
.item-b {
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2;
grid-row-end: span 2;
}
만약 grid-column-end/grid-row-end가 선언되지 않으면, 항목은 기본적으로 1개의 트랙을 가로지르게 됩니다.
항목끼리 겹칠 수 있습니다. z-index를 사용하여 그들의 쌓임 순서를 조절할 수 있습니다.
2. grid-column, grid-row
grid-column-start + grid-column-end 및 grid-row-start + grid-row-end에 대한 약식(shorthand)입니다.
값:
<start-line> / <end-line>: 각각span을 포함하여 longhand 버전과 동일한 모든 값을 허용합니다.
.item {
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}예시:
.item-c {
grid-column: 3 / span 2;
grid-row: third-line / 4;
}
만약 end line 값이 선언되지 않으면, 항목은 기본적으로 1개의 트랙을 가로지르게 됩니다.
3. grid-area
아이템에 이름을 부여하여 grid-template-areas 속성으로 생성된 템플릿에서 참조할 수 있도록 합니다. 또는 이 속성은 grid-row-start + grid-column-start + grid-row-end + grid-column-end를 위한 더 짧은 축약형으로 사용할 수 있습니다.
값:
<name>: 원하는 이름<row-start> / <column-start> / <row-end> / <column-end>: 숫자 또는 이름된 라인일 수 있습니다.
.item {
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}예시:
아이템에 이름을 할당하는 방법으로:
.item-d {
grid-area: header;
}grid-row-start + grid-column-start + grid-row-end + grid-column-end의 축약형으로 사용하는 방법으로:
.item-d {
grid-area: 1 / col4-start / last-line / 6;
}
4. justify-self
셀 내에서 그리드 항목을 인라인 (행) 축을 따라 정렬합니다(align-self는 블록 (열) 축을 따라 정렬합니다). 이 값은 단일 셀 내의 그리드 항목에 적용됩니다.
값:
start: 그리드 항목을 셀의 시작 가장자리와 정렬합니다.end: 그리드 항목을 셀의 끝 가장자리와 정렬합니다.center: 그리드 항목을 셀의 가운데에 정렬합니다.stretch: 셀의 전체 너비를 채웁니다(기본값).
.item {
justify-self: start | end | center | stretch;
}예시:
.item-a {
justify-self: start;
}
.item-a {
justify-self: end;
}
.item-a {
justify-self: center;
}
.item-a {
justify-self: stretch;
}
모든 항목에 대해 그리드에서 정렬을 설정하려면 이 동작은 justify-items 속성을 통해 그리드 컨테이너에도 설정할 수 있습니다.
5. align-self
셀 내에서 그리드 항목을 블록 (열) 축을 따라 정렬합니다(justify-self는 인라인 (행) 축을 따라 정렬합니다). 이 값은 단일 그리드 항목 내의 콘텐츠에 적용됩니다.
값:
start: 그리드 항목을 셀의 시작 가장자리와 정렬합니다.end: 그리드 항목을 셀의 끝 가장자리와 정렬합니다.center: 그리드 항목을 셀의 가운데에 정렬합니다.stretch: 셀의 전체 높이를 채웁니다(기본값).
.item {
align-self: start | end | center | stretch;
}예시:
.item-a {
align-self: start;
}
.item-a {
align-self: end;
}
.item-a {
align-self: center;
}
.item-a {
align-self: stretch;
}
모든 항목에 대해 그리드를 정렬하려면 이 동작은 align-items 속성을 통해 그리드 컨테이너에도 설정할 수 있습니다.
6. place-self
place-self는 align-self와 justify-self 속성을 단일 선언으로 설정합니다.
값:
auto: 레이아웃 모드에 대한 "기본" 정렬입니다.<align-self> / <justify-self>: 첫 번째 값은align-self를 설정하고, 두 번째 값은justify-self를 설정합니다. 두 번째 값이 생략된 경우 첫 번째 값이 두 속성 모두에 할당됩니다.
.item-a {
place-self: center;
}
.item-a {
place-self: center stretch;
}
모든 주요 브라우저는 Edge를 제외하고 place-self 축약 속성을 지원합니다.
Special Units & Functions
1. fr units
CSS Grid에서 1fr과 같은 분수 단위를 많이 사용할 것입니다. 이들은 본질적으로 "남은 공간의 일부"를 의미합니다. 따라서 다음과 같은 선언:
grid-template-columns: 1fr 3fr;이는 대략 "25% 75%"를 의미합니다. 단, 이러한 백분율 값은 분수 단위보다 훨씬
구체적입니다. 예를 들어, 만약 해당 백분율 기반의 열에 패딩을 추가한다면, 지금은 100%의 너비가 깨집니다(콘텐츠 박스 박스 모델을 가정할 때). 또한 분수 단위는 다른 단위와 함께 사용할 때 훨씬 더 유연합니다. 예를 들어:
grid-template-columns: 50px min-content 1fr;2. Sizing Keywords
행과 열의 크기를 지정할 때, px, rem, % 등에 익숙한 모든 길이 단위를 사용할 수 있을 뿐만 아니라 다음과 같은 키워드를 사용할 수도 있습니다:
min-content: 콘텐츠의 최소 크기입니다. "E pluribus unum"과 같은 텍스트 라인을 상상해보십시오. 여기서min-content는 "pluribus"라는 단어의 너비일 것입니다.max-content: 콘텐츠의 최대 크기입니다. 위의 문장을 상상해보면max-content는 문장 전체의 길이가 될 것입니다.auto: 이 키워드는fr단위와 매우 유사하지만, 남은 공간을 할당할 때fr단위에 비해 크기를 "잃어버립니다".- 분수 단위: 위에서 설명한 것과 같습니다.
3. Sizing Functions
fit-content() 함수는 사용 가능한 공간을 활용하지만 최소한의 크기는 min-content보다 작을 수 없고 최대 크기는 max-content보다 클 수 없습니다. minmax() 함수는 이름 그대로 최소값과 최대값을 설정하여 길이가 얼마나 될 수 있는지를 결정합니다. 이것은 상대적인 단위와 함께 사용하기에 유용합니다. 예를 들어 열을 일정한 크기로만 축소하도록 설정할 수 있습니다. 이는 극히 유용하며 아마도 당신이 원하는 방식일 것입니다:
grid-template-columns: minmax(100px, 1fr) 3fr;min() 함수와 max() 함수도 있습니다.
4. The repeat() Function and Keywords
repeat() 함수는 일부 입력을 줄이는 데 도움이 될 수 있습니다:
/* 복잡한 형태 */
grid-template-columns:
1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
/* repeat() 함수 사용 */
grid-template-columns:
repeat(8, 1fr);
/* 특히 */
grid-template-columns:
repeat(8, minmax(10px, 1fr));하지만 repeat() 함수는 키워드와 결합할 때 더 다양한 형태로 사용할 수 있습니다:
auto-fill: 가능한 한 많은 열을 한 행에 맞추려고 시도하며, 빈 열이 있더라도 채우려고 합니다.auto-fit: 가능한 열이 있으면 모든 열을 공간에 맞추려고 하며, 비어있는 열보다는 공간을 채우기 위해 열을 확장하려고 합니다.
이 중 가장 유명한 CSS 그리드 팁 중 하나로, 다음과 같은 작성이 있습니다:
grid-template-columns:
repeat(auto-fit, minmax(250px, 1fr));5. Masonry
CSS 그리드의 실험적 기능 중 하나는 masonry layout입니다. 이에는 여러 가지 접근 방법이 있지만, 대부분이 트릭이며 중요한 단점이 있거나 기대하는 것과 다를 수 있습니다.
현재 사양에는 공식적인 방법이 있으며, Firefox의
-moz-masonry 속성처럼 일부 브라우저에서 실험적인 속성을 지원하는 것이 있습니다. 그러나 모든 브라우저에서 일반적으로 사용 가능한 솔루션이 아닙니다.
그래도 현재로서는 다양한 스크립트나 라이브러리를 사용하여 Masonry 레이아웃을 구현하는 것이 좋은 선택일 수 있습니다.
Responsiveness
CSS 그리드를 사용하여 반응형 레이아웃을 구현하는 것은 매우 효과적입니다. 미디어 쿼리를 활용하여 화면 크기에 따라 그리드의 구조를 동적으로 변경할 수 있습니다.
/* 기본 그리드 설정 */
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 10px;
}
/* 미디어 쿼리에 따른 그리드 조정 */
@media screen and (min-width: 600px) {
.container {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
}
@media screen and (min-width: 1200px) {
.container {
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
}이 예시에서는 minmax() 함수와 함께 auto-fill을 사용하여 그리드의 열을 동적으로 조정하고, 미디어 쿼리를 사용하여 화면 크기에 따라 다른 열의 개수와 크기를 지정합니다.
이러한 방식으로 CSS 그리드를 활용하면 다양한 디바이스와 화면 크기에 대응하는 반응형 레이아웃을 쉽게 구현할 수 있습니다. 다양한 속성과 함수를 조합하여 그리드 시스템을 유연하게 조작할 수 있습니다.
