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; Commented el 13 ene. 2023 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. Commented el 13 ene. 2023 a las 17:26
  • De nada, te invito a que verifiques la respuesta si te sirvió, saludos. Commented el 13 ene. 2023 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... Commented el 13 ene. 2023 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. Commented el 13 ene. 2023 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é Commented el 13 ene. 2023 a las 22:08

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.