Виталий!
Как я понял, вы хотите получить конструкцию, в которой заголовок занимает всю ширину контейнера, а остальные элементы выстраиваются вторым рядом с заданным межколонником:
См. также:
Боюсь, в текущей реализации гридов так сделать не получится. Вы создаёте явные колонки с помощью repeat(auto-fit, minmax(0, max-content)). Это буквально значит: создай как можно больше колонок с шириной, равной ширине содержимого или нулю. Браузер создаёт три колонки с шириной по содержимому текста и несколько сотен колонок нулевой ширины:
См. также:
Когда мы добавляем column-gap, браузер стремится «впихнуть» все эти сотни колонок так, чтобы между ними был заданный межколонник. В результате колонки с текстом теряют в ширине, а вёрстку «корёжит»:
Можно не создавать нулевые колонки, отказавшись от явного задания колонок. Тогда элементы не поместятся в грид‑контейнер, браузер автоматически создаст неявные колонки, размерами которых можно управлять с помощью grid-auto-columns. Но grid-column: 1 / -1, растягивающий заголовок на все колонки, работает только для явных колонок, заданных с помощью grid-template-columns:
.grid {
display: grid;
grid-template-rows: max-content max-content;
grid-auto-flow: column; /* «Невлезающие» элементы раскладываем по колонкам */
grid-auto-columns: max-content; /* Пусть неявно созданные колонки имеют ширину равную ширине своего содержимого */
column-gap: 10px;
}
.grid_title {
grid-column: 1 / -1;
background: lightblue;
}Я бы посоветовал решить эту задачу флексбоксом:
.grid {
display: flex; /* Включаем флексбокс */
flex-wrap: wrap; /* Разрешаем переносить содержимое */
column-gap: 10px; /* Задаём межколонник */
}
.grid_title {
flex-basis: 100%; /* Пусть grid_title по умолчанию занимает 100% ширины родителя. Соответственно, все остальные элементы выстроятся под ним */
background: lightblue;
}Странно, что grid_title — это спан, а не заголовок подходящего уровня. Я бы заменил его на <h3> — это поможет поисковикам и устройствам для чтения с экрана лучше понять содержимое страницы:
<div class="grid">
<h3>Заголовок</h3>
<span>Первый</span>
<span>Второй</span>
<span>Треееееееееееетий</span>
</div>Заголовок
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.