Неравная ширина столбца при использовании сетки CSS с промежутком сетки-колонны ⇐ CSS

[Anonymous]

При использовании CSS GRID я могу настроить Grid-Template-Columns < /code> следующим образом: < /p>

Код: Выделить всё

section {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

section article:first-child {
grid-column: span 2;
}

article img {
height: 200px;
width: 100%;
object-fit: cover;
}< /code>


[img]https://unsplash.com/photos/tRmoHmKd60Q/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8NHx8bGVnb3xlbnwwfHx8fDE3NDUzMzIyNDZ8MA&force=true&w=640[/img]
A couple of legos that are on a table photo


[img]https://unsplash.com/photos/Jytx4OCVBoU/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8Nnx8bGVnb3xlbnwwfHx8fDE3NDUzMzIyNDZ8MA&force=true&w=640[/img]
A close up of a lego figure on a black background photo


[img]https://unsplash.com/photos/g6YO_FyafLc/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8MzF8fGxlZ298ZW58MHx8fHwxNzQ1MzMyNzMxfDA&force=true&w=640[/img]
Brown robot toy on white table photo


[img]https://unsplash.com/photos/hRCH8faulKA/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8MzV8fGxlZ298ZW58MHx8fHwxNzQ1MzMyNzMxfDA&force=true&w=640[/img]
White and black skeleton figurine on gray rock photo

Правило сетки-template допускает статьи, которые расширяют или сокращаются, чтобы заполнить строку, но где они будут завершены, когда они будут достаточно узкими. Первая статья установлена ​​на два столбца. Это обеспечивает отзывную сетку статей, где первая статья шире, чем оставшиеся статьи. Перекушено:

возможно, что колонка с фиксированными столбцами не соответствует фиксированной колонке? Ширина и медиа -запросы, чтобы изменить ширину и количество столбцов, но я надеялся на более отзывчивый макет.

Подробнее здесь: https://stackoverflow.com/questions/795 ... olumn-span