Grid 用于布局，Flexbox 用于组件

CSS Grid和 flexbox 之间的主要区别。CSS Grid 是一个多维布局模块，这意味着它有列和行。Flexbox 可以将其子项布局为列或行，但不能两者兼而有之。

Grid主栏和侧边栏

HTML

<div class="wrapper">
  <aside>Sidebar</aside>
  <main>Main</main>
</div>

CSS

@media (min-width: 800px) {
  .wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-gap: 16px;
  }

  aside {
    align-self: start;
  }
}

如果align-self不用于<aside>元素，则无论内容长度如何，它的高度都将等于主元素。

Grid卡片

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
}

列宽至少为200px，如果空间不够，它会将卡片换行。值得一提的是，如果视口宽度小于200px.

一个简单的解决方案是仅在视口宽度足够时才添加网格定义。见下文：

CSS

@media (min-width: 800px) {
  .wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 16px;
  }
}

Grid部分布局

在下面的设计中，我们可以使用两次grid，第一次使用是将区域划分为两个区域（联系我们侧边栏，表单），第二次使用是表单网格本身。

CSS

@media (min-width: 800px) {
  .wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
  }

  .form-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
  }

  .form-message,
  .form-button {
    grid-column: 1 / 3; /* let them take the full width */
  }
}

Flexbox 网站导航

在 90% 的时间里，网站导航应该使用 CSS flexbox 构建。最常见的模式是左侧有徽标，右侧有导航。这对于 flexbox 来说是完美的。

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

摘录自：https://ishadeed.com/article/grid-layout-flexbox-components/