Skip to main content
se eliminaron 95 caracteres en el cuerpo
Origen Enlace
Invited
  • 149
  • 9

si no mal recurdo grid es para hacer cuadriculas, para lo que quieres lograr es usando flexbox:

si no mal recurdo grid es para hacer cuadriculas, para lo que quieres lograr es usando flexbox:

se añadieron 232 caracteres en el cuerpo
Origen Enlace
Invited
  • 149
  • 9

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>

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>
 <div class="grid" d="5" t="3" m="2">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>

    <script>
        // tomo atributo d y lo establesco como cantidad e columnas.
        var grid = document.querySelectorAll(".grid");

        /* grid.forEach((g) => {
                        let cantidad = g.getAttribute("d");
                        g.style.gridTemplateColumns = "repeat(" + cantidad + ",1fr)";
                    }); */
    </script>

    <style>
        * {
            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>

si no mal recurdo grid es para hacer cuadriculas, para lo que quieres lograr es usando flexbox:

<body>
    <div id="container">
        <div id="pyramid"></div>
    </div> 

    <script>
        let j, i, row, itemCount, ulChildren;
        let uniqueID = 0;

        function liElements() {
            let pyramid = document.getElementById("pyramid");
            /* i --> elementID, j --> nr of rows / rowID */

            for (j = 0; j < 5; j++) {
                row = document.createElement("ul");
                pyramid.appendChild(row);
                row.setAttribute("id", "ul-" + j);
                itemCount = 2 * (j + 1) - 1; //put 1,3,5... elements into ul-s

                let ulChildren = "";

                for (i = 0; i < itemCount; i++) {
                    uniqueID++;
                    ulChildren += "<li>ITEM" + " " + (i + 1) + "-" + uniqueID + "</li>";
                    row.innerHTML = ulChildren;
                }
            }
        }

        liElements();
    </script>

    <style>
        body {
            font-size: 10px;
            font-family: Verdana, sans-serif;
        }
        
        #container {
            margin: auto;
            background: #dedede;
            overflow: hidden;
            padding: 1rem 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        #intro {
            margin: 0 1rem 2rem 1rem;
            text-align: center;
        }
        
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 0 auto;
            overflow: hidden;
        }
        
        li {
            list-style-type: none;
            color: #dec1ff;
            background: #7d70ba;
            padding: 0.3rem 0.5rem;
            margin: 0 0.3rem 0.5rem 0;
            border-radius: 5px;
            display: inline-block;
        }
    </style>
</body>
Origen Enlace
Invited
  • 149
  • 9

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>

 <div class="grid" d="5" t="3" m="2">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>

    <script>
        // tomo atributo d y lo establesco como cantidad e columnas.
        var grid = document.querySelectorAll(".grid");

        /* grid.forEach((g) => {
                        let cantidad = g.getAttribute("d");
                        g.style.gridTemplateColumns = "repeat(" + cantidad + ",1fr)";
                    }); */
    </script>

    <style>
        * {
            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>

espero te sirva