grid fill columns of element width to 150% of page width-CodePudding

Pointless but required details:
I could build the software myself as its open source but its server software so i don,t want to
This relates to a self made CSS theme, tho there might be a alternate solution i don't want it
I am open to other solutions that acomplish the same thing and is pure css and is in the same scope, unlikely tho they may be.

Actual problem:
create a grid filled with columns of element width spanning 150% of screen or document width

Important info:
I DO NOT have access to the JS or HTML
Element size is determined by code that i don't have access to
Each element is the same size WITCH I DO NOT HAVE see above
I DO want it to overflow to the right of the page that's kinda the point

.homePage .itemsContainer {
    display: grid;
    grid-template-columns: repeat(calc(100vw/max-content),1fr); /* this is the relevant line */
    grid-auto-rows: auto;
  }

Attempted: flex: 1 dimensional it simply wont do
grid: auto minmax calc min-content max-content fill-content fit-content fr vw % none of witch worked
obviously tried several sources for a solution but no dice.

calc could in theory work, unfortunately it wont work with min/max-content

CodePudding user response：

.homePage .itemsContainer {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(idealsizehere, 1fr) );
    grid-auto-rows: auto;
  }

CodePudding user response：

Just set the width to 150% then put whatever you want in there.

div {
  height: 200px;
  width: 150%;
  outline: 2px dashed blue;
}

<div>

</div>