CSS Сетка карусель - последние пункты сокращаются

Question

Я пытаюсь создать простую карусель с CSS Grid, и я почти все понял, но есть одна деталь, которую я не могу исправить.

Вот основной код

<div id="car">
    <div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

#car{width:100%; overflow:hidden;}
    #car > div{display:grid;grid-template-columns:25%;grid-auto-flow:column;}

К сожалению, в этом случае только первый элемент получает 25%, а остальные go очень маленькие (вероятно, min-content) .

До того, как я попробовал другую вещь, используя auto-fill

   #car > div{grid-template-columns:repeat(auto-fill, 25%);}

В приведенном выше случае первые 4 элемента были бы хорошо, но все, что теоретически находится за пределами исходного окна просмотра, сжимается. Как остановить сжатие и заставить каждый элемент иметь одинаковую ширину?

Здесь я переместил внутренний div на 500px влево, чтобы два больших изображения на самом деле являются последними 2 из 4, а рядом с ними находятся те, кто по какой-то причине не соблюдает ширину;

Answer 1

Вам нужно grid-auto-columns, а не grid-template-columns, чтобы определить ширину столбцов здесь:

#car {
  width: 100%;
  overflow: hidden;
}
#car > div {
  display: grid;
  grid-auto-columns: 25%;
  grid-auto-flow: column;
}
img {display:block;width:90%;margin:auto;}

<div id="car">
    <div>
        <div class="item"> <img src="http://dummyimage.com/100"></div>
        <div class="item"> <img src="http://dummyimage.com/100"></div>
        <div class="item"> <img src="http://dummyimage.com/100"></div>
        <div class="item"> <img src="http://dummyimage.com/100"></div>
        <div class="item"> <img src="http://dummyimage.com/100"></div>
        <div class="item"> <img src="http://dummyimage.com/100"></div>
        <div class="item"> <img src="http://dummyimage.com/100"></div>
    </div>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns

Свойство grid-auto-columns CSS указывает размер неявно -созданная сетка столбцов дорожки или шаблон дорожек.

Пока

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

grid-template-columns CSS свойство определяет имена строк и функции определения размера дорожки столбцов сетки .

Answer 2

grid-template-columns:25%

Надеюсь, вы понимаете, этот кодовый набор только 1 столбец. Что вы говорите, так это чтобы первый элемент был исправлен на 25%, для других мне все равно.

Если вы хотите, чтобы оставшиеся элементы также составляли 25%, вам нужно написать

grid-template-columns:repeat({numberofitem}, 25%)