CSS 그리드가 부트스트랩 보다 나은 이유

CSS Grid는 웹에 레이아웃을 만드는 새로운 방법입니다. 처음으로 우리는 브라우저에서 기본적으로 사용할 수있는 적절한 레이아웃 시스템을 갖추고있어 많은 이점을 제공합니다.

CSS Grid를 가장 인기있는 프레임 워크, 즉 Bootstrap과 비교하면 이러한 이점이 특히 명확 해집니다 ( 여기서는 btw 에 대한 무료 과정을 만들었습니다 ).JavaScript를 도입하지 않으면 이전에는 불가능했던 레이아웃을 만들 수있을뿐만 아니라 코드를 유지하고 이해하기가 더 쉬울 것입니다.

이 기사에서는 왜 그런지 설명 할 것입니다.

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

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

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

이제 CSS Grid가 부트 스트랩을 능가한다고 생각하는 이유에 대한 세 가지 주요 이유를 살펴 보겠습니다.

마크 업이 더 간단 해집니다.

CSS Grid로 부트 스트랩을 스왑하면 HTML이보다 깨끗해질 것입니다. 이것이 가장 중요한 이점은 아니지만 가장 먼저 눈에 띄는 이점입니다.

이것을 예시하기 위해 웹 사이트의 더미 레이아웃을 만들었으므로 두 버전에 필요한 코드를 비교할 수 있습니다. 여기있어:

참고 : 예제에 약간의 디자인을 부여했습니다. 그러나 이것은 CSS Grid와 Bootstrap의 비교와는 아무런 관련이 없으므로 CSS의 일부분을 코드 예제 외부에 보관할 것입니다.

부트 스트랩

부트 스트랩에서이 웹 사이트를 만드는 데 필요한 마크 업을 먼저 살펴 보겠습니다.

내가 여기서 알아야 할 두 가지가 있습니다.

1. 각 행은 자체 <div>태그 여야합니다 .
2. 레이아웃 ( col-xs-2) 을 지정하려면 클래스 이름을 사용해야 합니다.
3. 이 레이아웃이 복잡 해짐에 따라 HTML도 복잡해집니다.

이것이 반응 형 웹 사이트 인 경우 태그는 일반적으로 더욱 악화됩니다.

CSS 그리드

이제 CSS 그리드의 방법을 살펴 보겠습니다. HTML은 다음과 같습니다.

여기서 의미 론적 요소를 사용할 수 있었지만, div와 비교하여 Bootstrap 예제와 비교하기 쉽도록 선택했습니다.

이 마크 업이 더 간단하다는 것을 즉시 알 수 있습니다. 추한 클래스 이름과 각 행에 필요한 추가 div 태그가 없어졌습니다. 그것은 그리드를위한 컨테이너이고, 그 안에있는 아이템입니다.

그리고 부트 스트랩과 달리이 마크 업은 레이아웃이 복잡해지면서 복잡성이 크게 증가하지 않습니다.

그러나 부트 스트랩 예제에서는 CSS를 추가 할 필요가 없지만 물론 CSS 그리드 예제에서는이를 요구합니다. 특별히 다음을 추가해야합니다.

그리고 그것은 어떤 사람들에게는 Bootstrap에 대한 찬성 입장이 될 수 있습니다. HTML에서 레이아웃을 정의하기 만하면 간단한 그리드를 만들기 위해 CSS에 대해 걱정할 필요가 없습니다.

그러나 다음 단계에서 이해할 수 있듯이 마크 업과 레이아웃 간의 이러한 결합은 실제로 유연성면에서 약점이 있습니다.

훨씬 더 많은 유연성

화면 크기에 따라 레이아웃을 변경한다고 가정 해 보겠습니다. 예를 들어 모바일에서 볼 때 상단 행까지 메뉴를 가져옵니다.

즉, 다음과 같이 레이아웃을 변경하십시오.

이걸로 :

CSS 그리드

CSS 그리드로 이것을하는 것은 매우 간단합니다. 우리는 단지 미디어 쿼리를 추가하고 원하는 항목들 사이를 섞습니다.

HTML을 쓰는 방법에 대해 걱정할 필요없이 레이아웃을 재정렬 할 수 있다는 점을 소스 순서 독립 이라고 하며 개발자와 디자이너에게는 큰 도움이됩니다.

CSS Grid를 사용하면 HTML이 있어야 할 내용을 HTML로 만들 수 있습니다. 내용의 마크 업. CSS에 속하는 비주얼이 아닙니다.

부트 스트랩

부트 스트랩에서 동일한 작업을 원한다면 실제로 HTML을 변경해야합니다. 우리는 이동해야 할 것 메뉴 외에, 맨 윗줄까지 태그를 , 헤더 는 AS 메뉴가 두 번째 행에 갇혀있다.

미디어 쿼리를 기반으로이를 수행하는 것은 쉬운 일이 아닙니다. HTML과 CSS만으로는 할 수 없으므로 JavaScript로 시작해야합니다.

이 예제는 CSS 그리드에서 지금까지 경험 해본 가장 큰 이점을 보여줍니다.

12 열 제한 없음

이것은 큰 문제는 아니지만 여러 번 짜증을냅니다. 부트 스트랩 그리드가 12 개의 열로 나뉘어져 있기 때문에 5 열 레이아웃을 원할 경우 문제가 발생합니다. 또는 7. 아니면 9 살. 아니면 최대 12 개까지 추가하지 않는 것.

CSS Grid에서는 그렇지 않습니다. 그리드에 원하는 열의 양을 정확하게 표시 할 수 있습니다. 7 열 그리드가 있습니다.

이것은 설정하면됩니다 grid-template-columns에 repeat(7, 1fr)다음과 같이 :

이제는 부트 스트랩을 해킹하여이 작업을 수행하는 방법이있을 수 있습니다.

그리고 저는 Bootstrap 4가 Flexbox를 사용하고 있다는 것을 알고 있습니다. 그러나 FlexBox는 베타 버전이 아닐 수도 있습니다.

브라우저 지원

끝내기 전에 물론 브라우저 지원에 대해서도 이야기해야합니다. 이 기사를 쓰는 시점에서 전세계 웹 사이트 트래픽의 75 %가 CSS Grid를 지원합니다.

그러나 CSS Grid 사용에 대한 생각을 완전히 없애기 전에 Morten Rand-Eriksen이 그 주제에 관해 언급 한 내용을 들어 보았습니다. CSS Grid는 우리가 이전 버전과의 호환성에 대해 생각하는 방식을 재구성 할 수있는 기회입니다.

CSS 그리드는 레이아웃 모듈입니다. 소스 순서를 방해하지 않고 문서의 레이아웃을 변경할 수 있습니다. 즉, CSS 그리드는 순수하게 시각적 인 도구이므로 올바르게 사용하면 문서의 내용을 전달하는 데 아무런 영향을 미치지 않습니다. 이것은 단순하지만 놀라운 진리를 따릅니다. 이전 브라우저에서 CSS 그리드를 지원하지 않아도 방문자의 경험에 영향을 미치지 않아야 하며, 경험을 다르게 만듭니 다 .

즉, 시각적 콘텐츠와 콘텐츠를 분리했기 때문에 모든 방문자에게 콘텐츠가 제공되지만 결과적으로 CSS Grid는 더 나은 레이아웃을 통해 지원을받는 사람들의 경험을 향상시킵니다. .

최종 견해

마지막으로 Mozilla의 개발자 옹호 인 Jen Simmons 의 견적을 말씀드립니다 . 그녀는 그것을 알기 위해 CSS Grid에 대해 얻은 것과 동일한 감정을 묘사합니다.

CSS Grid를 많이 사용할수록 그 위에 추상화 레이어를 추가하면 아무런 이점이 없다는 것을 확신 할 수 있습니다. CSS Grid는 레이아웃 프레임 워크입니다. 브라우저에서 바로 굽습니다. - 젠 시몬스

CSS Grid가 미래라고 확신하고 더 많은 것을 배우고 싶다면 여기에서 무료 강의를 확인 하십시오.

---

읽어 주셔서 감사합니다! 내 이름은 Per입니다. 저는 Scrimba 의 공동 설립자입니다 . 대화 형 코딩 스크린 캐스트를 제작하기위한 새로운 도구입니다. 질문이나 의견이 있으시면 Twitter 를 통해 나에게 연락하십시오 .

https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163