当涉及到网页布局时，display: flex; 和 display: grid; 是两个常用的 CSS 属性，它们都允许创建不同类型的布局，但有着不同的用法和适用场景。

使用flex布局的痛点

当我们使用justify-content: space-between;让子元素两端对齐，自动分配中间间距，假设一行有5个，如果每一行都是相同的5个是没有问题的，但如果最后一行只有4个的情况就会出现如下图的问题：

/* flex布局 */
display: flex;
flex-wrap: wrap;
/* 元素两端对齐 */
justify-content: space-between;

这个时候如何让最后一行和前两行效果一致，实现起来是比较麻烦的。但是如果换成grid布局，这个效果是很好实现的。

相同的布局将flex改成grid

<div class="container">
 	<div class="item-box">box</div>
	......
 </div>
<style>
    .container{
      	display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }
</style>

代码解释：

• display: grid; 设置grid布局
• grid-template-columns: repeat(5, 1fr); 每一行5列，每列都是1fr
• gap: 20px; 四周的间距是20px

布局效果如下图：

上面的grip布局，最后一行不是5个，但是可以左对齐，不会像flex布局一样的bug。

进阶使用grid布局做响应式

注意：使用响应式布局，父容器不能使用固定单位，而是使用百分比单位布局

<div class="container">
 	<div class="item-box">box</div>
	......
 </div>
<style>
    .container{
      	width: 100%;
      	display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }
</style>

grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));核心代码解释，每一行列数自动填充auto-fill，每一列最小宽度minmax(300px, 1fr)255px，最大宽度1fr。

效果如下图：

使用grid-row和grid-column实现B站布局效果

<div class="container">
 	<div class="item-box item-box-1">box</div>
	......
 </div>
<style>
    .container .item-box-1 {
        height: auto;
        grid-row: 1/3;
        grid-column: 1/3;
      }
</style>

grid-row 和 grid-column 是 CSS Grid Layout 中的属性，用于定义网格元素的位置和大小。这两个属性可以用于同时定义行和列，例如 grid-row: 1/3; grid-column: 2/5; 表示元素从第一行线到第三行线，从第二列线到第五列线。

最重要的是，display: flex; 和 display: grid; 都提供了灵活性和响应性，可以帮助你创建各种各样的布局，以满足你的设计需求。根据你的具体项目和设计目标来选择正确的工具，以获得最佳的布局结果。