그리드(Grids)

그리드(Grids)

CSS 그리드 레이아웃은 웹용 2차원 레이아웃 시스템으로 행과 열에 콘텐츠를 배치할 수 있습니다. 또한 복잡한 레이아웃을 간단하게 만드는 많은 기능이 있습니다.

그리드 레이아웃이란 무엇입니까?

그리드는 디자인 요소를 정렬할 수 있는 패턴을 생성하는 수평선과 수직선의 모음입니다. 그리드는 페이지를 이동하거나 너비를 변경하지 않는 레이아웃을 만드는 데 도움을 주어 웹사이트에서 더 큰 일관성을 제공합니다. 그리드에는 일반적으로 열 , 행 및 각 행과 열 사이에 간격이 있습니다. 간격은 일반적으로 거터 라고 합니다 .

CSS에서 그리드 만들기

디자인에 필요한 그리드를 결정했으면 CSS로 그리드 레이아웃을 사용하여 만들 수 있습니다.

1. 그리드 정의

가장 먼저 그리드를 정의합니다.

display: grid;

2. 그리드 위치를 잡습니다.

grid-template-columns: 2fr 1fr 1fr;

3. 트랙 사이의 간격 정합니다.

grid-gap: 20px;

4. 트랙 목록 반복이 가능합니다.

반복되는 경우 repeat() 이용하여 편하게 반복할 수 있습니다.

grid-template-columns: repeat(3, 1fr);

크기를 고정할 수 있습니다.

영역이 변하지 않는 대신 오버플러우가 발생할 수 있습니다.

grid-template-columns: minmax(100px, auto);

라인 기반 배치

이제 그리드 생성에서 그리드에 물건 배치로 넘어갑시다. 그리드에는 항상 선이 있습니다. 이 선은 1부터 번호가 매겨지며 문서의 쓰기 모드와 관련이 있습니다.

grid-column-start, grid-column-end, grid-row-start, grid-row-end을 사용하여 배치 합니다.

grid-template-area로 포지셔닝

그리드에 항목을 정렬하는 다른 방법은 grid-template-areas속성을 사용하고 다양한 요소에 이름을 지정하는 것입니다.

.container {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    gap: 20px;
    }
header {grid-area: header;}
article {grid-area: content;}
aside {grid-area: sidebar;}
footer {grid-area: footer;}

grid-template-area 규칙

• 그리드의 모든 셀을 채워야 합니다.
• 두 셀에 걸쳐 확장하려면 이름을 반복합니다.
• 셀을 비워 두려면 .(마침표)를 사용합니다.
• 영역은 직사각형이어야 합니다.
• 영역은 다른 위치에서 반복될 수 없습니다.

CSS에서 그리드 프레임워크

그리드 "프레임워크"는 12개 또는 16개 열 그리드를 기반으로 하는 경향이 있습니다.