2

tengo el siguiente codigo.

.container{
    margin:auto;
    width: min(100%, 800px);
    border: 1px solid #0e0e0e;
    min-height: 200px;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    align-items: start;
    justify-items: center;
}
.container a{
    border: 1px solid #0e0e0e;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
        <a href="#">Link 6</a>
        <a href="#">Link 7</a>
        <a href="#">Link 8</a>
        <a href="#">Link 9</a>
        <a href="#">Link 10</a>
    </div>
</body>
</html>

Como ven el autoflow de las columnas parte de izquierda a derecha, como puedo lograr que aparezcan de manera inversa?, es decir, de derecha a izquierda cuando la pantalla va reduciendo de tamaño.

1
  • Prueba con flex-wrap: wrap-reverse; o direction: rtl; el 13 ene. a las 17:15

2 respuestas 2

1

Puedes utilizar la propiedad direction: rtl en donde significa que la dirección de los elementos serán de derecha a izquierda (right to left), ejemplo:

.container{
    margin:auto;
    width: min(100%, 800px);
    border: 1px solid #0e0e0e;
    min-height: 200px;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    align-items: start;
    justify-items: center;
    direction: rtl;
}
.container a{
    border: 1px solid #0e0e0e;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
        <a href="#">Link 6</a>
        <a href="#">Link 7</a>
        <a href="#">Link 8</a>
        <a href="#">Link 9</a>
        <a href="#">Link 10</a>
    </div>
</body>
</html>

2
  • 1
    Gracias Crack! Excelente, no me la sabia. el 13 ene. a las 17:26
  • De nada, te invito a que verifiques la respuesta si te sirvió, saludos. el 13 ene. a las 17:26
1

Puedes utilizar direction para definir el sentido de la lectura.

.container{
    margin:auto;
    width: min(100%, 800px);
    border: 1px solid #0e0e0e;
    min-height: 200px;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    align-items: start;
    justify-items: center;
    direction: rtl;
}
.container a{
    border: 1px solid #0e0e0e;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
        <a href="#">Link 6</a>
        <a href="#">Link 7</a>
        <a href="#">Link 8</a>
        <a href="#">Link 9</a>
        <a href="#">Link 10</a>
    </div>
</body>
</html>

3
  • Me percaté que habías dado otra respuesta... y luego copiaste a la mía... en la cual, la anterior respuesta tuya estaba bien. Sería bueno si dejaras como estaba, de esta forma serían 2 respuestas distintas, tal como estaba antes... el 13 ene. a las 17:24
  • Amigo excelente respuesta, muchas gracias por la información, al igual que el compañero de arriba, ambos estan en lo correcto. el 13 ene. a las 17:26
  • @Cris223511.dev es que probando mi código me di cuenta que no hacían falta dos propiedades que tenía, por eso lo modifiqué el 13 ene. a las 22:08

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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