浅谈css grid比Bootstrap更适合创建布局的原因

1. CSS Grid和Bootstrap的概述

CSS Grid和Bootstrap是现在前端开发中比较流行的两种网页布局方案。它们各有特点，可以用于不同的开发场景。

CSS Grid是一种基于网格的布局方案，它可以实现网页布局的自由排列。和Bootstrap相比，CSS Grid的定位更灵活，支持更多的定位方式，并且在实现布局时代码更简洁。

Bootstrap是一种基于栅格的响应式网页布局框架，它可以快速方便地构建响应式网页，支持移动端和PC端网页布局。

2. CSS Grid和Bootstrap的不同之处

2.1 网格系统的不同

CSS Grid和Bootstrap的网格系统不同。CSS Grid可以很自由地定义网格，可以实现更多布局定位方式。而Bootstrap的网格系统比较固定，只能按照一定的比例排列，不能自由改变。

下面是一个CSS Grid实现的布局示例：

.container {

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
}
.box1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 4;
}
.box2 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}
.box3 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
}

而下面是一个Bootstrap实现的布局示例：

<div class="container">

  <div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
  </div>
  <div class="row">
    <div class="col-sm-8"></div>
    <div class="col-sm-4"></div>
  </div>
</div>

2.2 样式和布局的不同

CSS Grid支持更多的布局方式，并且在实现布局时代码更简洁。而Bootstrap的布局代码比较冗长，但是支持响应式布局，可以方便地适配不同大小的屏幕。

以下是一个实现响应式布局的Bootstrap示例：

<div class="container">

  <div class="row">
    <div class="col-sm-4 col-xs-6"></div>
    <div class="col-sm-4 col-xs-6"></div>
    <div class="col-sm-4 col-xs-6"></div>
  </div>
</div>

以上代码实现了在大屏幕下显示3列，小屏幕下显示2列的效果。而CSS Grid可以通过类似CSS的方式自由定义每个网格的样式和位置，可以实现更多复杂的布局。

3. CSS Grid比Bootstrap更适合创建布局的原因

3.1 灵活的定位方式

CSS Grid支持更多灵活的定位方式，比如可以通过grid-template-areas属性将不同区域的网格合并成一个整体，方便布局。

以下是一个使用grid-template-areas属性实现的布局示例：

.container {

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}

以上代码实现了一个头部、侧边栏、内容和底部四个区域的布局。使用grid-template-areas将不同区域的网格合并成一个整体，方便布局。

3.2 代码更简洁

使用CSS Grid布局时，需要的代码较少，减少了代码量，也便于维护，适用于复杂布局下的快速开发。(以下代码使用CSS Grid实现了bootstrap样式的响应式布局方案)

.container {

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}
.col-xs-1 {
  grid-column: span 1;
}
.col-xs-2 {
  grid-column: span 2;
}
.col-xs-3 {
  grid-column: span 3;
}
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(12, 1fr);
  }
  .col-sm-1 {
    grid-column: span 1;
  }
  .col-sm-2 {
    grid-column: span 2;
  }
  .col-sm-3 {
    grid-column: span 3;
  }
  .col-sm-4 {
    grid-column: span 4;
  }
  .col-sm-5 {
    grid-column: span 5;
  }
  .col-sm-6 {
    grid-column: span 6;
  }
  .col-sm-7 {
    grid-column: span 7;
  }
  .col-sm-8 {
    grid-column: span 8;
  }
  .col-sm-9 {
    grid-column: span 9;
  }
  .col-sm-10 {
    grid-column: span 10;
  }
  .col-sm-11 {
    grid-column: span 11;
  }
  .col-sm-12 {
    grid-column: span 12;
  }
}

以上代码实现了Bootstrap的响应式布局方案，代码看起来更简洁明了。

3.3 支持更多的布局方式

使用CSS Grid，可以很容易地实现更复杂的布局方式，比如垂直居中、各种方向的网格浏览器排列等。

以下是一个实现垂直居中的CSS Grid布局示例：

.container {

  display: grid;
  width: 500px;
  height: 500px;
  justify-content: center;
  align-items: center;
}
.box {
  width: 200px;
  height: 200px;
}

以上代码实现了将.box元素垂直水平居中的效果，使用CSSGrid很容易就能实现这样一个常规的布局需求。

4. 总结

虽然Bootstrap在响应式布局上优势明显，但是在更加复杂的布局下，CSS Grid展现出了更大的优势。

总体来说，CSS Grid和Bootstrap都有各自的优点，可以根据实际场景选择使用。但是在不涉及响应式布局且布局比较复杂的情况下，CSS Grid无疑是更加优秀的选择。