1

Pienso que debe ser algo básico, pero no encuentro la forma de centrar mis items dentro de un contenedor display:grid. En este link pueden encontrar el ejemplo corriendo: https://lab.ruzestudio.com/grid/

Aclaraciones importantes:
1- No quiero centrar el texto, sino que las cajas naranjas se vayan cargando alineadas al centro y no a la izquierda.
2- La idea es usar la estructura en contenidos dinámicos, no se cuantas cajas naranjas puede haber, por ende una solución basada en alinear un item puntal no me serviría.
3- ACTUALIZACIÓN: agregué al contenedor las propiedades justify-items:center; y align-items:center; pero no funciono. Se puede ver en el link

asi queda mi contenido

y acá esta el codigo:

<style>
        *{
            box-sizing: border-box;
        }
        .grid{
            display: grid;
            grid-template-columns: auto;
            grid-gap: 30px;
            padding: 30px;
            justify-content: center;
            align-content: center;

            
        }
        .grid > div{
            background: orange;                                             
            display: inline-block;
        }
    </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>

Muchas gracias!

4
  • es decir que la caja 6 esté abajo de la caja 2 y asi sucesivamente?
    – user128299
    Commented el 17 sept. 2020 a las 21:06
  • Claro, en este caso si. Commented el 17 sept. 2020 a las 21:18
  • 1
    El problema es que justify-content: center; te centra el contenido completo en base al contenedor padré, es como si te pintase un contenedor que envuelve los divs y en base a eso centra todo el contenido, no los centra de forma independiente, es mas facil hacer eso con flexbox.
    – Elboy
    Commented el 17 sept. 2020 a las 21:47
  • Claro si mi contenedor fuera mas grande o el total de mi template de items seria mas chico podria ver el justify-content en accion por lo que entiendo. Pero por lo que veo el grid en su funcionamiento es mas como una tabla, no? O sea lo que estoy queriendo hacer con CSS Grid no se pude? Commented el 18 sept. 2020 a las 13:26

1 respuesta 1

1

<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>

espero te sirva

1
  • Gracias! me gusta la solución que propones con JS y Flexbox. Me quedo igual con la duda si Css Grid permite hacer algo como esto? Commented el 18 sept. 2020 a las 13:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.