si no mal recurdo grid es para hacer cuadriculas, para lo que quieres lograr es más fácil usando flexbox:
* {
box-sizing: border-box;
}
.grid {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.grid>div {
border: solid 1px black;
padding: 10px;
margin: 5px;
}
</style>
<body>
<div class="grid" d="5" t="3"<div m="2">id="container">
<div>Lorem ipsum dolor<div sitid="pyramid"></div>
amet, consectetur adipisicing elit.</div>
<script>
<div>Lorem ipsum dolor sit ametlet j, consecteturi, adipisicingrow, elit.</div>itemCount, ulChildren;
<div>Loremlet ipsumuniqueID dolor= sit0;
amet, consectetur adipisicing elit.</div> function liElements() {
<div>Lorem ipsum dolor sit amet,let consecteturpyramid adipisicing= elitdocument.</div>getElementById("pyramid");
<div>Lorem ipsum dolor sit amet/* i --> elementID, consecteturj adipisicing--> elit.<nr of rows /div> rowID */
<div>Lorem ipsum dolor sit amet,for consectetur(j adipisicing= elit.0; j </div> 5; j++) {
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit row = document.</div>createElement("ul");
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit pyramid.</div>appendChild(row);
</div>
<script> row.setAttribute("id", "ul-" + j);
// tomo atributo d y lo establesco como cantidaditemCount e= columnas2 * (j + 1) - 1; //put 1,3,5... elements into ul-s
var grid let ulChildren = document.querySelectorAll(".grid");"";
/* grid.forEach( for (g)i =>= 0; i < itemCount; i++) {
uniqueID++;
let cantidad = g.getAttribute ulChildren += "<li>ITEM" + " " + ("d"i + 1);
+ "-" + uniqueID + "</li>";
g.stylerow.gridTemplateColumnsinnerHTML = "repeat("ulChildren;
+ cantidad + ",1fr)"; }
}
}
liElements(); */
</script>
<style>
*body {
boxfont-sizingsize: border10px;
font-box;family: Verdana, sans-serif;
}
.grid#container {
margin: auto;
background: #dedede;
overflow: hidden;
padding: 1rem 0;
display: flex;
flex-directionwrap: column;wrap;
alignjustify-itemscontent: center;
}
#intro {
margin: 0 1rem 2rem 1rem;
text-align: center;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
overflow: hidden;
}
.grid>divli {
borderlist-style-type: solidnone;
1px black; color: #dec1ff;
background: #7d70ba;
padding: 10px;0.3rem 0.5rem;
margin: 0 0.3rem 0.5rem 0;
border-radius: 5px;
display: inline-block;
}
</style>
</body>