Ищете более краткий синтаксис для повторения столбцов шаблона с использованием сетки 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) без пробелов, чтобы компенсировать:

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>