Как в гридах сделать чтобы элементы выходили за область экрана справа, а не перескакивали вниз?

Question

[Артём]

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

На данный момент css код грид контейнера, в котором находятся эти 8 элементов выглядит так:

.resultContainer {
  display: grid;
  grid-area: resultContainer;
  width: 100%;
  grid-template-columns: 25% 25% 25% 25%;
  padding-top: 100px;
  margin-right: 20px;
}

Подскажите пожалуйста, как можно сдвинуть нижние элементы вправо за область экрана. Их может быть значительно ниже 4, надо чтобы все они выстраивались справа за областью блока.

Comments

[HelpSophie]

Зачем для этого грид, когда есть флексы??
Но вот так извратно: https://jsfiddle.net/6ch8zvy4/

[Артём]

HelpSophie, чем флексы лучше гридов?(

[HelpSophie]

Артём, в данном случае тем, что у флексов желаемое вами поведение происходит по умолчанию и не нужно спрашивать как это сделать.
А вообще ничем не лучше, каждое свойство подходит для своих задач, иногда пересекающихся.