CSS 그리드가 부트스트랩보다 레이아웃 생성에 더 적합한 이유에 대한 간략한 설명

CSS Grid가 Bootstrap보다 레이아웃에 더 좋은 이유는 무엇입니까? 이번 글에서는 그 이유를 소개하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

CSS 그리드는 레이아웃을 생성하는 새로운 방법입니다. 이는 역사상 최초의 적절한 레이아웃 시스템이며 브라우저에 기본적으로 적용되어 많은 이점을 가져왔습니다. CSS Grid是一种全新的创建布局方式，这是有史以来第一次合适的布局系统，并且他是浏览器原生的，他给我们带来了很多好处。

当你和当今最流行的Bootstrap框架相比，grid的好处变的尤为清晰，您不仅可以创建在以前在不引入JavaScript的情况下无法实现的布局，而且您的代码将更易于维护和理解。

【相关推荐：《css视频教程》《bootstrap教程》】

本文中我会解释一下为什么。

标签会更加简洁

相比Bootstrap，使用grid会使你的HTML更加干净，虽然这不是最重要的好处，但它可能会是你第一个注意到的。

为了举例说明，我创建了一个布局，以便我们可以比较两个版本所需要的代码。

注意：我在给出的例子中稍微设计了一下，但是他和我们比较Bootstrap没有任何关系，所以我只保留布局部分的CSS

Bootstrap

先看一下Bootstrap需要创建的标签。

这里有两件事需要注意一下：

• 每个row都需要一个<div>标签<li>使用了class name来指定布局(<code>col-xs-2)

随着这种布局的复杂性增长，HTML也是如此。

如果这是个响应式网站，它会看起来更复杂：




现在我们来看一下用Grid布局：



我可以在这里使用语义化元素，但我还是使用div来和Bootstrap对比。

显然，grid用来布局看起来更简单，丑陋的类名和每行所需的额外的div标签一去不复返了，简简单单一个container和里面的item。

与Bootstrap不同的是，随着布局复杂度的增加，Grid布局标签的复杂度将不会增加太多。

Bootstrap示例不需要添加任何CSS，引用一下就可以了。CSS Grid肯定需要添加。具体来说，是这样的：




这可能是一些人赞成Bootstrap的一个论点：你不用关心CSS，只需要在HTML中定义布局。但是，正如你将会明白的那样，当涉及到灵活性的时候，标签和布局之间的耦合会变成一个很大的问题。

更灵活

假设您想要根据屏幕大小更改布局。 例如，将菜单拉到最上面一行，在移动设备上查看。

换句话说，布局从这样：



换成这样：



CSS Grid

用CSS Grid的话会非常简单，我们只需要添加一个media query，布局就像变魔术一样变成了你想要的。



你可以这样重新排列布局，不用担心HTML标签编写的顺序，这对开发人员和设计师都是很大的一个好处！

BootStrap

如果想在Bootstrap

오늘날 가장 인기 있는 Bootstrap 프레임워크와 비교해 보면 그리드의 이점이 특히 분명해집니다. JavaScript를 도입하지 않으면 이전에 달성할 수 없었던 레이아웃을 만들 수 있을 뿐만 아니라 코드도 더 쉽게 만들 수 있습니다. 유지하고 이해합니다. 🎜🎜[관련 권장사항: "css 동영상 튜토리얼》 《부트스트랩 튜토리얼》]🎜🎜이 기사에서는 그 이유를 설명하겠습니다. 🎜

태그가 더 간결해집니다

🎜Bootstrap 그리드를 사용하면 HTML이 더 깔끔해집니다. 이것이 가장 중요한 이점은 아니지만 가장 먼저 눈에 띄는 이점일 수 있습니다. 🎜🎜설명을 위해 두 버전에 필요한 코드를 비교할 수 있도록 레이아웃을 만들었습니다. 🎜🎜<img src="https://img.php.cn/upload/image/546/635/881/162087136573757CSS%20%EA%B7%B8%EB%A6%AC%EB%93%9C%EA%B0%80%20%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9%EB%B3%B4%EB%8B%A4%20%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%20%EC%83%9D%EC%84%B1%EC%97%90%20%EB%8D%94%20%EC%A0%81%ED%95%A9%ED%95%9C%20%EC%9D%B4%EC%9C%A0%EC%97%90%20%EB%8C%80%ED%95%9C%20%EA%B0%84%EB%9E%B5%ED%95%9C%20%EC%84%A4%EB%AA%85" title="162087136573757CSS 그리드가 부트스트랩보다 레이아웃 생성에 더 적합한 이유에 대한 간략한 설명" alt="CSS 그리드가 부트스트랩보다 레이아웃 생성에 더 적합한 이유에 대한 간략한 설명">🎜<blockquote>🎜참고: 주어진 예에서 약간 디자인했지만 비교 <code>Bootstrap과는 관련이 없으므로 레이아웃 부분의 CSS만 유지합니다🎜

부트스트랩

🎜먼저 살펴보세요 Bootstrap이 생성해야 하는 태그를 살펴보겠습니다.
🎜🎜🎜🎜여기서 주목해야 할 두 가지 사항이 있습니다: 🎜
• 각 행에는 <div> 태그가 필요합니다.<li>클래스 이름 Layout(col-xs-2)</li>🎜이 레이아웃이 복잡해짐에 따라 HTML도 복잡해집니다. 🎜🎜반응형 웹사이트라면 더 복잡해 보일 것입니다:<br>🎜🎜<img src="https://img.php.cn/upload/image/166/897/428/162087144658504CSS%20%EA%B7%B8%EB%A6%AC%EB%93%9C%EA%B0%80%20%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9%EB%B3%B4%EB%8B%A4%20%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%20%EC%83%9D%EC%84%B1%EC%97%90%20%EB%8D%94%20%EC%A0%81%ED%95%A9%ED%95%9C%20%EC%9D%B4%EC%9C%A0%EC%97%90%20%EB%8C%80%ED%95%9C%20%EA%B0%84%EB%9E%B5%ED%95%9C%20%EC%84%A4%EB%AA%85%20" title="162087144658504CSS 그리드가 부트스트랩보다 레이아웃 생성에 더 적합한 이유에 대한 간략한 설명" alt="CSS 그리드가 부트스트랩보다 레이아웃 생성에 더 적합한 이유에 대한 간략한 설명">🎜🎜이제 그리드 레이아웃 사용을 살펴보겠습니다. 🎜🎜<img src="https://img.php.cn/upload/image/587%20/748/926/162087154237642CSS%20%EA%B7%B8%EB%A6%AC%EB%93%9C%EA%B0%80%20%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9%EB%B3%B4%EB%8B%A4%20%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%20%EC%83%9D%EC%84%B1%EC%97%90%20%EB%8D%94%20%EC%A0%81%ED%95%A9%ED%95%9C%20%EC%9D%B4%EC%9C%A0%EC%97%90%20%EB%8C%80%ED%95%9C%20%EA%B0%84%EB%9E%B5%ED%95%9C%20%EC%84%A4%EB%AA%85" title="162087154237642CSS 그리드가 부트스트랩보다 레이아웃 생성에 더 적합한 이유에 대한 간략한 설명" alt="CSS 그리드가 부트스트랩보다 레이아웃 생성에 더 적합한 이유에 대한 간략한 설명">🎜🎜여기서 의미 요소를 사용할 수 있지만 <code>BootstrapContrast를 일치시키기 위해 여전히 div를 사용합니다. . 🎜🎜분명히 그리드 레이아웃은 보기 흉한 클래스 이름과 각 행에 필요한 추가 div 태그가 사라졌습니다. 단지 컨테이너와 내부 항목일 뿐입니다. 🎜🎜부트스트랩과 달리 레이아웃 복잡도가 증가하더라도 그리드 레이아웃 태그의 복잡도는 크게 증가하지 않습니다. 🎜🎜Bootstrap 예제에는 CSS를 추가할 필요가 없으며 인용만 하면 됩니다. CSS 그리드는 반드시 추가되어야 합니다. 구체적으로는 다음과 같습니다.
  🎜🎜🎜🎜이는 Bootstrap을 선호하는 일부 사람들의 주장일 수 있습니다. CSS에 신경 쓸 필요가 없으며 HTML로 레이아웃을 정의하기만 하면 됩니다. 그러나 이해하시겠지만 레이블과 레이아웃 간의 결합은 유연성 측면에서 큰 문제가 될 수 있습니다. 🎜

  더 유연함a> Strong>

  🎜화면 크기에 따라 레이아웃을 변경하고 싶다고 가정해 보겠습니다. 예를 들어 모바일 장치에서 보려면 메뉴를 맨 위 행으로 끌어옵니다. 🎜🎜즉, 레이아웃은 다음과 같이 시작됩니다: 🎜🎜🎜🎜다음과 같이 바꾸세요:🎜🎜🎜

  CSS 그리드

  🎜CSS 그리드를 사용하는 것은 매우 간단합니다. 미디어 쿼리를 추가해야 레이아웃이 마술처럼 원하는 대로 됩니다. 🎜🎜🎜🎜당신 HTML 태그가 작성되는 순서에 대해 걱정하지 않고 이러한 방식으로 레이아웃을 재정렬할 수 있습니다. 이는 개발자와 디자이너에게 큰 이점입니다! 🎜

  부트스트랩 h2>🎜Bootstrap에서 동일한 작업을 수행하려면 HTML을 수정하고 태그 순서를 조정해야 합니다. 🎜

  

  이 요구 사항을 충족하려면 미디어 쿼리만으로는 충분하지 않으며 JavaScript도 사용해야 합니다.

  이 예제는 제가 경험한 그리드의 가장 큰 장점입니다

  더 이상 12개 열로 제한되지 않습니다

  큰 문제는 아니지만 이 문제는 Bootstrap 의 그리드 시스템은 12열로 나누어져 있는데 5열 레이아웃을 원하면 헷갈리거나, 7열, 9열, 아니면 12열로 합쳐지지 않는 것들이 있습니다. <code>Bootstrap的grid系统分为了12列，如果你想要一个5列的布局就会纠结，或是7列、9列、任何不会合为12列的。

  CSS Grid就没有任何限制，你可以让grid正好有你想要的数量。这是一个7列的grid：

  

  通过设置grid-template-columns : repeat(7, 1fr)实现，就像这样：

  

  浏览器支持

  当然也必须讨论一下浏览器支持，在撰写本文的时候，全球75%的网站流量支持CSS Grid

  CSS 그리드 제한이 없으며 그리드를 원하는 수만큼 정확하게 만들 수 있습니다. 이것은 7열 그리드입니다:

  

  다음과 같이 grid-template-columns :peat(7, 1fr)를 설정하면 달성됩니다.

  

  브라우저 지원

  물론 브라우저 지원에 대해서도 논의해야 합니다. 작성 당시 전 세계 웹 사이트 트래픽의 75%가 CSS 그리드

  🎜🎜🎜를 지원합니다. CSS 그리드는 태그 순서를 방해하지 않고 문서의 레이아웃을 변경할 수 있는 레이아웃 모듈입니다. 즉, CSS 그리드는 제대로 사용하면 문서 내용 표현에 아무런 영향을 주지 않는 순전히 시각적인 도구입니다. 따라서 이전 브라우저에서 CSS 그리드에 대한 지원 부족은 방문자 경험에 영향을 미치지 않으며 단지 경험을 다르게 만들 뿐입니다. 🎜🎜🎜원본 주소: https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜