Skip to main content
se eliminaron 33 caracteres en el cuerpo
Origen Enlace
user128299
user128299

estoy practicando con css grid y tengoTengo la siguiente duda, como puedo mover un ítem hijo al principio de su contenedor?? ya coloqué justify-content: end en el contenedor y justify-self: start en el ítem hijo, adjunto código e imagen para los que me puedan ayudar, gracias!! Vengo de flexbox asi que igual no me ha costado aprender css grid, pero tiene mas diferencias que similitudes

introducir la descripción de la imagen aquí

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

.container{
    margin: 50px auto;
    background-color: red;
    display: grid;
    grid-template-columns: 100px 100px 100px 100px; 
    grid-template-rows: 50px;
    grid-gap: 15px;
    line-height: 50px;
    justify-content: end;
    
}

.item{
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
}

.item-1{
    justify-self: start;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="#inicio" class="item item-1">Inicio</a>
    <div class="container">
        
        <a href="#noticia" class="item item-2">Noticias</a>
        <a href="#nosotros" class="item item-3">Nosotros</a>
        <a href="#contactenos" class="item item-4">Contactenos</a> 
    </div>
</body>
</html>

estoy practicando con css grid y tengo la siguiente duda, como puedo mover un ítem hijo al principio de su contenedor?? ya coloqué justify-content: end en el contenedor y justify-self: start en el ítem hijo, adjunto código e imagen para los que me puedan ayudar, gracias!! Vengo de flexbox asi que igual no me ha costado aprender css grid, pero tiene mas diferencias que similitudes

introducir la descripción de la imagen aquí

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

.container{
    margin: 50px auto;
    background-color: red;
    display: grid;
    grid-template-columns: 100px 100px 100px 100px; 
    grid-template-rows: 50px;
    grid-gap: 15px;
    line-height: 50px;
    justify-content: end;
    
}

.item{
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
}

.item-1{
    justify-self: start;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="#inicio" class="item item-1">Inicio</a>
    <div class="container">
        
        <a href="#noticia" class="item item-2">Noticias</a>
        <a href="#nosotros" class="item item-3">Nosotros</a>
        <a href="#contactenos" class="item item-4">Contactenos</a> 
    </div>
</body>
</html>

Tengo la siguiente duda, como puedo mover un ítem hijo al principio de su contenedor?? ya coloqué justify-content: end en el contenedor y justify-self: start en el ítem hijo, adjunto código e imagen para los que me puedan ayudar, gracias!! Vengo de flexbox asi que igual no me ha costado aprender css grid, pero tiene mas diferencias que similitudes

introducir la descripción de la imagen aquí

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

.container{
    margin: 50px auto;
    background-color: red;
    display: grid;
    grid-template-columns: 100px 100px 100px 100px; 
    grid-template-rows: 50px;
    grid-gap: 15px;
    line-height: 50px;
    justify-content: end;
    
}

.item{
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
}

.item-1{
    justify-self: start;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="#inicio" class="item item-1">Inicio</a>
    <div class="container">
        
        <a href="#noticia" class="item item-2">Noticias</a>
        <a href="#nosotros" class="item item-3">Nosotros</a>
        <a href="#contactenos" class="item item-4">Contactenos</a> 
    </div>
</body>
</html>

Origen Enlace
Israel
  • 219
  • 2
  • 7
  • 18

¿Como mover item hijo dentro de un contenedor con css grid?

estoy practicando con css grid y tengo la siguiente duda, como puedo mover un ítem hijo al principio de su contenedor?? ya coloqué justify-content: end en el contenedor y justify-self: start en el ítem hijo, adjunto código e imagen para los que me puedan ayudar, gracias!! Vengo de flexbox asi que igual no me ha costado aprender css grid, pero tiene mas diferencias que similitudes

introducir la descripción de la imagen aquí

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

.container{
    margin: 50px auto;
    background-color: red;
    display: grid;
    grid-template-columns: 100px 100px 100px 100px; 
    grid-template-rows: 50px;
    grid-gap: 15px;
    line-height: 50px;
    justify-content: end;
    
}

.item{
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
}

.item-1{
    justify-self: start;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="#inicio" class="item item-1">Inicio</a>
    <div class="container">
        
        <a href="#noticia" class="item item-2">Noticias</a>
        <a href="#nosotros" class="item item-3">Nosotros</a>
        <a href="#contactenos" class="item item-4">Contactenos</a> 
    </div>
</body>
</html>