如何优雅的实现大屏项目的顶部按钮

场景介绍

在一些大屏项目中，我们会经常有这样的需求，顶部布局中，中间是一张背景图或大的文字，两侧会有均匀分布的几个按钮，当然肯定会有很多种实现方式，本文讨论的是使用grid的优雅实现方式，如有更优雅的实现方式，欢迎大家评论区留言 👏🏻 👏🏻 👏🏻

grid实现

<div class="demo">
  <div class="img" style="background: red"></div>
  <div v-for="item in 6" :key="item" style="background: green"></div>
 </div>

我们直接可以将中间固定的图片放在第一元素的位置，其他按钮可以通过循环得到，然后通过grid布局处理

.demo {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr 1fr 400px 1fr 1fr 1fr;
  height: 100px;
  grid-template-areas: '. . . center . . .';
  gap: 20px;
  .img {
    height: 100px;
    grid-area: center;
  }
}

最终效果：