SCSS 程序集中的网格列

body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.block_brothers {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f8fff7;
  display: grid;
  grid-template-columns: repeat(100, 1vw);
  grid-template-rows: repeat(30, 1vw);
}

$column1: ( s1: 1, f1: 25, s2: 25, f2: 27, s3: 27, f3: -1);

.bl {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #d00;
  background-color: #fff;
  z-index: 2;
  @for $i from 1 through 3 {
    &:nth-child(#{$i}) {
      grid-column-start: #{map-get($column1,'s'+$i)};
      grid-column-end: #{map-get($column1,'f'+$i)};
      grid-row: 1 / 2;
    }
  }
}

.black{
  background-color: #000;
}
.orange {
  background-color: red;

<div class="block_brothers">
  <img src="element.jpg" alt="">
  <div class="bl orange"></div>
  <div class="bl black"></div>
  <div class="bl orange"></div>
</div>