对于使用css网格重复模式的列，看上去更简洁吗？

Question

是否有任何语法来重复这个精确的网格布局？

.grid-system {    
  grid-template-columns: 42px 48px 42px 48px 42px 48px 42px 48px 42px 48px 42px;
}

我试过了，但似乎没有用：

.grid-system {    
  grid-template-columns: repeat(11, 42px, 48px);
}

下面是一个包含更多详细信息的代码笔：

https://codepen.io/matthewharwood/pen/vPXWmm

如您所见，设计破坏了默认的网格系统，因此我创建了一个扁平网格(samba-flat-grid) w/o间隙来弥补：

​

Answer 1

这是grid-template-columns: repeat(11, 42px 48px) --没有它们之间的空间。检查here的所有可能性。

见下面的演示：

​

.samba-grid {
  display: grid;
  grid-template-columns: repeat(12, 42px);
  background: pink;
  width: 100%;
  column-gap: 48px;
}

.samba-flat-grid {
  display: grid;
  grid-template-columns: repeat(11, 42px 48px); /* CHANGED */
  background: yellow;
  width: 100%;
}

.container {
  width: 100%;
  max-width: 1032px;
  margin: 0 auto;
  background: green;
}

.section {
  width: 100%;
  display: block;
  background: papayawhip;
}

.element-1 {
  grid-column-start: 1;
  grid-column-end: span 6;
}

.element-2 {
  grid-column-start: 7;
  grid-column-end: span 6;
}

.element-inner-img {
  background: blue;
  grid-column-start: 1;
  grid-column-end: span 6;
}

.element-inner-img img {
  width: 100%;
}

.element-inner-content {
  background: #b000b5;
  grid-column-start: 7;
  grid-column-end: 12;
}

<div class="section">
  <div class="container">
    <div class="samba-grid">
      <div class="element-1">
        <div class="samba-flat-grid">
          <div class="element-inner-img">
            <img src="https://placebear.com/1600/900" alt="">
          </div>
          <div class="element-inner-content">
            <p>Hello World</p>
          </div>
        </div>
      </div>
      <div class="element-2">

        <div class="samba-flat-grid">
          <div class="element-inner-img">
            <img src="https://placebear.com/1600/900" alt="">
          </div>
          <div class="element-inner-content">
            <p>Hello World</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

​