2

Al usar un display grid, las columnas renderizan correctamente, al 50% del ancho, con display flex, hay una pequeña "desviación".

introducir la descripción de la imagen aquí

¿Por que se produce esto?

Suelo usar flex para maquetar dentro de otros elementos, este tipo de cosas no me da mucha confianza.

Nota: probado en Chromium / Firefox.


Código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style type="text/css">
        * {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding   : 0;
            margin    : 0;
        }

        .flex-cols {
            display       : flex;
            flex-direction: row;
            margin-top    : 1rem;
        }
        .grid-cols {
            display: grid;
            grid-template-columns: auto auto;
        }

        .col1 {
            background-color: orange;
        }
        .col2 {
            background-color: skyblue;
        }

        .text-content {
            background: grey;

            margin: 1rem auto;
            width : 80%;
        }
    </style>
</head>
<body>
    <div class="grid-cols">
        <div class="col1">
            <div class="text-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque aliquam tempora minus sunt dolor asperiores eveniet, repellendus ad cupiditate molestias assumenda hic tenetur illum quidem sapiente vero. Tempore, quae illum.
            </div>
        </div>
        <div class="col2">
            <div class="text-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, ipsa! Explicabo ullam voluptatem, esse tempore, officiis ratione velit laborum soluta deleniti dignissimos eum sapiente id quis modi eaque aspernatur eligendi.s
            </div>
        </div>
    </div>

    <div class="flex-cols">
        <div class="col1">
            <div class="text-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque aliquam tempora minus sunt dolor asperiores
                eveniet, repellendus ad cupiditate molestias assumenda hic tenetur illum quidem sapiente vero. Tempore, quae
                illum.
            </div>
        </div>
        <div class="col2">
            <div class="text-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, ipsa! Explicabo ullam voluptatem, esse
                tempore, officiis ratione velit laborum soluta deleniti dignissimos eum sapiente id quis modi eaque
                aspernatur eligendi.s
            </div>
        </div>
    </div>
</body>
</html>

2 respuestas 2

1

La diferencia de entre ambos display radica en que display: grid se basa en un corsé de filas y columnas y display: flex se adapta naturalmente al contenido que tenga el contenedor.

¿Esto que quiere decir? Que al definir en con grid la propiedad grid-template-columns: auto auto estás diciendo al navegador que renderice la fila con dos columnas con el mismo tamaño cada una. En cambio con flex no estás definiendo ningún comportamiento para las columnas, por lo que el navegador le va a dar a cada una el tamaño con el que juzgue que su contenido va a poder visualizarse mejor (cuanto más ocupe el contenido de la columna mayor tamaño le va a dar a esta).

Si quieres hacer que con flex cada columna ocupe la mitad de su contenedor puedes usar en cada una de ellas la propiedad flex: 1. De esta manera estarás diciendo que quieres que cada columna ocupe la mitad de su contenedor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style type="text/css">
        * {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding   : 0;
            margin    : 0;
        }

        .flex-cols {
            display       : flex;
            flex-direction: row;
            margin-top    : 1rem;
        }
        .grid-cols {
            display: grid;
            grid-template-columns: auto auto;
        }

        .col1 {
            background-color: orange;
            flex: 1;
        }
        .col2 {
            background-color: skyblue;
            flex: 1;
        }

        .text-content {
            background: grey;

            margin: 1rem auto;
            width : 80%;
        }
    </style>
</head>
<body>
    <div class="grid-cols">
        <div class="col1">
            <div class="text-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque aliquam tempora minus sunt dolor asperiores eveniet, repellendus ad cupiditate molestias assumenda hic tenetur illum quidem sapiente vero. Tempore, quae illum.
            </div>
        </div>
        <div class="col2">
            <div class="text-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, ipsa! Explicabo ullam voluptatem, esse tempore, officiis ratione velit laborum soluta deleniti dignissimos eum sapiente id quis modi eaque aspernatur eligendi.s
            </div>
        </div>
    </div>

    <div class="flex-cols">
        <div class="col1">
            <div class="text-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque aliquam tempora minus sunt dolor asperiores
                eveniet, repellendus ad cupiditate molestias assumenda hic tenetur illum quidem sapiente vero. Tempore, quae
                illum.
            </div>
        </div>
        <div class="col2">
            <div class="text-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, ipsa! Explicabo ullam voluptatem, esse
                tempore, officiis ratione velit laborum soluta deleniti dignissimos eum sapiente id quis modi eaque
                aspernatur eligendi.s
            </div>
        </div>
    </div>
</body>
</html>

0

Agrega esto a tu código:

.col1, .col2 {whith: 100%;}

o

.col1, .col2 {whith: 50%;}

Después de esto notarás que con display grid los contenedores no tendrán el mismo tamaño, pero los flex si, logicamente no vas a usar ambos asi que para cada uso, cada fórmula.

        * {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding   : 0;
            margin    : 0;
        }

        .flex-cols {
            display       : flex;
            flex-direction: row;
            margin-top    : 1rem;
        }
        .grid-cols {
            display: grid;
            grid-template-columns: auto auto;
        }

        .col1 {
            width: 100%;
            background-color: orange;
        }
        .col2 {
            width: 100%;
            background-color: skyblue;
        }

        .text-content {
            background: grey;

            margin: 1rem auto;
            width : 80%;
        }
  
<body>
    <div class="grid-cols">
        <div class="col1">
            <div class="text-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque aliquam tempora minus sunt dolor asperiores eveniet, repellendus ad cupiditate molestias assumenda hic tenetur illum quidem sapiente vero. Tempore, quae illum.
            </div>
        </div>
        <div class="col2">
            <div class="text-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, ipsa! Explicabo ullam voluptatem, esse tempore, officiis ratione velit laborum soluta deleniti dignissimos eum sapiente id quis modi eaque aspernatur eligendi.s
            </div>
        </div>
    </div>

    <div class="flex-cols">
        <div class="col1">
            <div class="text-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque aliquam tempora minus sunt dolor asperiores
                eveniet, repellendus ad cupiditate molestias assumenda hic tenetur illum quidem sapiente vero. Tempore, quae
                illum.
            </div>
        </div>
        <div class="col2">
            <div class="text-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, ipsa! Explicabo ullam voluptatem, esse
                tempore, officiis ratione velit laborum soluta deleniti dignissimos eum sapiente id quis modi eaque
                aspernatur eligendi.s
            </div>
        </div>
    </div>
</body>
</html>

Tu Respuesta

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

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