Блог

Главная - Вопросы по программированию - Ищете более краткий синтаксис для повторяющихся столбцов шаблона с использованием css grid?

Ищете более краткий синтаксис для повторяющихся столбцов шаблона с использованием css grid?

#html #css #syntax #css-grid

#HTML #css #синтаксис #css-grid

Вопрос:

Существует ли какой-либо синтаксис для повторения этого точного макета сетки?

 .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 ) без пробелов для компенсации: введите описание изображения здесь

Ответ №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>

Комментарии:

1. Неужели это просто опечатка! Эй, нет способа сохранить исходную сетку и сделать элемент внутри span над желобом, верно? (отметим это правильно в любом случае как можно скорее)

2. элементы сетки перекрывают gutter только тогда, когда они перекрывают и следующий элемент; поэтому ответ — нет