5 분 안에 CSS 그리드 배우기

웹 사이트 레이아웃의 미래에 대한 빠른 자습서.

그리드 레이아웃은 웹 사이트 디자인의 기본이며, CSS 그리드 모듈은 가장 강력하고 쉬운 웹 사이트 제작 도구입니다. 개인적으로 그것이 예를 들어 부트 스트랩과 같은 것보다 훨씬 낫다고 생각합니다 (여기에서 이유를 읽으십시오).

이 모듈은 올해 주요 브라우저 (Safari, Chrome, Firefox, Edge)에서 기본 지원을 받았으므로 모든 프론트 엔드 개발자는 먼 미래 에이 기술을 배워야한다고 생각합니다.

이 기사에서는 가능한 빨리 CSS Grid의 기본 사항을 살펴 보겠습니다. 기본 사항을 이해하기 전에는 신경 쓰지 말아야 할 모든 내용을 제외하겠습니다.

또한 무료 CSS 그리드 코스를 만들었습니다. 전체 액세스 권한을 얻으려면 여기를 클릭하십시오.

또는이 기사를 확인하면 과정 전체에서 배울 내용이 설명됩니다.

이제 뛰어 들자!

첫 번째 그리드 레이아웃

CSS Grid의 두 가지 핵심 요소는 랩퍼 (부모)와 항목 (자식)입니다. 래퍼는 실제 그리드이고 항목은 그리드 내부의 내용입니다.

다음은 6 개의 항목이 포함 된 래퍼의 마크 업입니다.

  
1   
2   
3   
4   
5   
6

래퍼 div를 그리드로 바꾸려면 간단히 그리드 표시를 제공하십시오.

.wrapper {
    디스플레이 : 그리드;
}

그러나 그리드의 모양을 정의하지 않았으므로 아직 아무것도하지 않습니다. 단순히 6 div를 서로 쌓아 놓을 것입니다.

스타일링을 조금 추가했지만 CSS 그리드와 관련이 없습니다.

열과 행

2 차원으로 만들려면 열과 행을 정의해야합니다. 세 개의 열과 두 개의 행을 만들어 봅시다. grid-template-row 및 grid-template-column 속성을 사용합니다.

.wrapper {
    디스플레이 : 그리드;
    그리드 템플릿 열 : 100px 100px 100px;
    그리드 템플릿 행 : 50px 50px;
}

그리드-템플릿 열에 대해 3 개의 값을 작성하면 3 개의 열이 표시됩니다. grid-template-rows에 두 개의 값을 지정 했으므로 두 개의 행이 생깁니다.

값은 열의 너비 (100px)와 행의 높이 (50px)를 나타냅니다. 결과는 다음과 같습니다.

값과 그리드의 모양 사이의 관계를 올바르게 이해하려면이 예제도 살펴보십시오.

.wrapper {
    디스플레이 : 그리드;
    그리드 템플릿 열 : 200px 50px 100px;
    그리드 템플릿 행 : 100px 30px;
}

코드와 레이아웃 간의 연결을 파악하십시오.

그 방법은 다음과 같습니다.

아이템 배치

다음으로 배워야 할 것은 그리드에 아이템을 배치하는 방법입니다. 여기에서 레이아웃을 만드는 것이 간단 해지기 때문에 초강력을 얻을 수 있습니다.

이전과 동일한 마크 업을 사용하여 3x3 격자를 만들어 봅시다.

.wrapper {
    디스플레이 : 그리드;
    그리드 템플릿 열 : 100px 100px 100px;
    그리드 템플릿 행 : 100px 100px 100px;
}

결과는 다음과 같습니다.

페이지에는 3x2 그리드 만 표시되지만 3x3 그리드로 정의했습니다. 그리드에 채울 항목이 6 개뿐이기 때문입니다. 세 개가 더 있으면 가장 낮은 행도 채워집니다.

항목을 배치하고 크기를 조정하기 위해 대상을 지정하고 그리드 열 및 그리드 행 속성을 사용합니다.

.item1 {
    그리드 열 시작 : 1;
    그리드-열-엔드 : 4;
}

여기서 말하는 것은 item1이 첫 번째 그리드 라인에서 시작하여 네 번째 열 라인에서 끝나기를 원한다는 것입니다. 다시 말해 전체 행을 차지하게됩니다. 화면에서 재생되는 방법은 다음과 같습니다.

3 개의 열만있을 때 4 개의 열 줄이있는 이유를 혼동하십니까? 열 이미지를 검은 색으로 그린이 이미지를 살펴보십시오.

이제 그리드의 모든 행을 사용하고 있습니다. 첫 번째 항목이 첫 번째 행 전체를 차지하게 만들면 나머지 항목이 아래로 밀렸습니다.

마지막으로 위의 구문을 작성하는 간단한 방법을 보여 드리고자합니다.

.item1 {
    그리드-열 : 1/4;
}

이 개념을 제대로 이해하려면 항목을 약간 재정렬 해 보겠습니다.

.item1 {
    그리드 열 시작 : 1;
    그리드-열-엔드 : 3;
}
.item3 {
    그리드 행 시작 : 2;
    그리드 행 끝 : 4;
}
.item4 {
    그리드 열 시작 : 2;
    그리드-열-엔드 : 4;
}

이것이 페이지에서 어떻게 보이는지 보여줍니다. 왜 그렇게 보이는지 둘러보십시오. 너무 힘들어서는 안됩니다.

그게 다야!

물론 아직 우리가 겪지 않은 수많은 개념이 있습니다. 그리고 배우고 싶다면 Scrimba에서 무료 CSS Grid 코스를 확인하십시오.

읽어 주셔서 감사합니다! 제 이름은 Per Borgen이며, 종종 새로운 것을 배우는 것에 대해 글을 씁니다. 연락을 유지하려면 Twitter 및 Instagram에서 팔로우하십시오.