CSS Grid로 신속하게 웹사이트 프로토타입을 만드는 방법

CSS 그리드 모듈은 웹 사이트의 모형을 만드는 환상적인 도구입니다. 그것은 내가 시도한 다른 시스템보다 빠르게 레이아웃을 실험 할 수있게 해줍니다.

이 기사에서 나는 당신에게 방법을 가르쳐 줄 것이다.

또한 무료 CSS 그리드 과정을 만들었습니다. 여기를 클릭하면 전체 내용을 볼 수 있습니다.

또는 과정 전반에 걸쳐 배울 내용을 설명하는 이 기사를 확인하십시오 .

CSS Grid를 배우고 싶습니까? 여기 내 무료 전체 길이 코스입니다. 메리 크리스마스!
초보자부터 고급자까지 13 가지 대화 형 스크린 캐스트.medium.freecodecamp.org

그리드

우리는 고전적인 웹 사이트를 모방하는 아주 기본적인 그리드부터 시작할 것입니다.

우리 예제를 약간의 스타일로 만들었지 만 CSS Grid와는 아무런 관련이 없다. 그래서 나는 그것을 버린다.

먼저,이 작업을 수행하는 데 필요한 HTML과 CSS를 설명하고 4 부분으로 나누었습니다. 일단 당신이 그걸 이해했다면, 우리는 레이아웃 실험으로 넘어갈 것입니다.

CSS 그리드를 처음 사용하는 분 이라면 주제에 관한 5 분짜리 소개 기사 를 보지 않을 수 있습니다 .

1. 마크 업

가장 먼저 필요한 것은 HTML입니다. 컨테이너 (격자로 바뀔 요소)와 항목 (머리글, 메뉴, 내용, 바닥 글).

  MENU </ div>   <div class = "content"> CONTENT </ div>   <div class <div class = "컨테이너"> 
  <div class = "header"> HEADER < 
div class = "menu" = "footer"> FOOTER </ div> </ div>

2. CSS의 기본 설정

그리드를 설정하고 필요한 행과 열의 수를 지정해야합니다. 다음은이를 수행하는 첫 번째 CSS입니다.

.container { 
    디스플레이 : 그리드;    
    grid-template-columns : 반복 (12, 1fr); 
    grid-template-rows : 50px 350px 50px; 
    그리드 간격 : 5px; 
}

나중에 더 추가 할 것이지만, 먼저 이것을 이해하길 바랍니다.

위 코드가 말하는 것은 다음과 같습니다. 12 개의 열이있는 격자를 만듭니다. 각 열은 소수 단위 (전체 너비의 1/12)입니다. 세 개의 행을 만듭니다. 첫 번째 행은 50px, 두 번째 행은 350px, 세 번째 행은 50px입니다. 마지막으로 그리드의 항목 사이에 간격을 추가하십시오.

3. 그리드 - 템플릿 영역 추가하기

레이아웃 슈퍼를 쉽게 실험 할 수있는 기능을 템플릿 영역 이라고 합니다.

그리드에 추가하려면 컨테이너에 grid-template-areas속성을 제공하면 됩니다. 다른 CSS 구문과는 달리 구문이 조금 이상 할 수 있습니다. 여기있어:

.container { 
    디스플레이 : 그리드; 
    그리드 간격 : 5px;    
    grid-template-columns : 반복 (12, 1fr); 
    grid-template-rows : 50px 350px 50px; 
    grid-template-areas : 
        "hhhhhhhhhhh h" 
        "mmccccccccc c" 
        "fffffffffff f"; 
}

grid-template-areas속성 뒤에있는 논리 는 코드에서 눈금의 시각적 표현을 만드는 것입니다. 당신이 볼 수 있듯이, 그것은 우리가 정의한 것처럼, 세 개의 행과 십이 열이 grid-template-columns와 grid-template-rows.

각 행은 행을 나타내고 각 문자 (h, m, c, f)는 격자 셀을 나타냅니다.

네 글자는 이제 직사각형을 형성합니다 grid-area.

당신이 짐작 했겠지만, 나는 문자를 선택한 h, m, c, f우리의 격자로 구성되어 있기 때문에 header, menu, content와 footer. 나는 그들이 원했던 무엇이든 그들에게 전화 할 수 있었다. 그러나 그들이 묘사하고있는 항목의 첫 번째 문자를 사용하는 것은 의미가있다.

4. 항목에 영역 부여하기

이제이 문자들을 그리드의 항목들과 연결해야합니다. 그렇게하기 위해 우리는 다음 grid-area속성을 사용할 것입니다 :

.header { 
    grid-area : h; 
}

.menu { 
    그리드 영역 : m; 
}

.content { 
    grid-area : c; 
}

.footer { 
   그리드 영역 : f; 
}

결과적으로 다음 레이아웃이 생성됩니다.

레이아웃 실험

이제 우리는 레이아웃 슈퍼를 쉽게 실험 할 수 있으므로 마침내이 기능의 아름다움에 도달했습니다. grid-template-areas속성 의 문자를 변경하는 것입니다 . 예를 들어 메뉴를 오른쪽으로 옮깁니다.

grid-template-areas : 
        "hhhhhhhhhhhh" 
        "ccccccccccmm" 
        "ffffffffffff";

이 레이아웃의 결과는 다음과 같습니다.

점들을 사용하여 빈 그리드 셀을 만들 수 있습니다.

그리드 템플릿 영역 : 
        ". hhhhhhhhhh. " 
        "ccccccccccmm " 
        ".fffffffffff. ";

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

이제 코드를 직접 실험 해 볼 수있는 CSS Grid 강의 스크린 캐스트 를 확인해 보시기 바랍니다.

믹스에 반응성 추가하기

이것을 응답과 결합하는 것은 또한 킬러 기능입니다. 이전에는 단순히 HTML 및 CSS만으로는 불가능했습니다. 모바일에서 볼 때 헤더 외에도 메뉴를 표시한다고 가정 해 보겠습니다. 그러면 다음과 같이 간단하게 할 수 있습니다.

@media 화면 및 (최대 너비 : 640px) { 
    .container { 
        grid-template-areas : 
            "mmmmmmhhhhh h" 
            "ccccccccccc c" 
            "fffffffffff f"; 
    } 
}

그리고 그 결과는 다음과 같습니다 :

이러한 모든 변경 사항은 HTML을 건드리지 않고도 순수한 CSS로 수행된다는 점을 기억하십시오. 그러나 div 태그가 마크 업에 어떻게 배치되어 있는지에 관계없이 우리가 원하는대로 이동할 수 있습니다.

이것을 소스 순서 독립이라고하며, CSS를위한 큰 발전입니다.

그것은 HTML을 원래 의도대로 만들 수 있습니다. 스타일링을위한 것이 아니라 CSS의 역할입니다.

CSS Grid에 대해 더 자세히 알고 싶으 시다면 여기에 이메일을 남겨주십시오 . 준비가되면 무료 CSS Grid 코스에 일찍 액세스 할 수 있습니다.

코스의 미리보기를 보려면 아래 이미지를 클릭하십시오.

읽어 주셔서 감사합니다! 의견이나 질문이 있으시면 아래에 의견을 남겨주십시오. 또는 트위터를 통해 저에게 연락하십시오  :)

https://goo.gl/SRo6m7