2

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>

4 respuestas 4

1

Si bien ya te respondieron con algo totalmente valido, es mas sencillo hacerlo aplicando un margen automático al primer child del flex

Probado en IE11 y superior, antes de eso no tengo idea

#content{display: flex; justify-content: flex-end}
#content div{padding: 10px}
#content div:first-child{margin-right:auto}
<div id="content">
  <div>demo</div>
  <div>demo</div>
  <div>demo</div>
</div>

1

Considero que el paso prudente en este caso es manejarse a través de: FlexBox pues nos da libertad de decidir la distribución de los elementos sobre el eje en el cual se encuentren.

Pues con CSS Grid tienes opciones como:

  • justify-self
  • align-self

Pero estos te van a permitir decidir la distribución del elemento sobre la celda en la cual se encuentra inscrutado, entonces en teoría tendrías que acomodar cada uno de los elementos del menú en una celda de la rejilla.

En cambio con FlexBox podemos proceder de esta forma:

  • Al contenedor principal le indicamos que sus elementos serán cajas flexibles
  • Les damos a los elementos una distribución horizontal con separación entre ellos

Ahora para lograr la separación entre el primer elemento del menú con respecto de los 3 restantes aplicamos:

  • Seleccionamos a uno de los elementos por medio de su clase item y por medio de la pseudoclase nth-child indicamos que empiece la selección del segundo de estos en específico
  • Una vez hecho lo anterior le damos a dicho elemento (el segundo) un margen izquierdo de X cantidad de pixeles para hacer notoria la separación del primer elementos del resto de ellos

    <style>
      .container {
        background-color: crimson;
        display: flex;
        justify-content: space-between;
      }
      .item {
        color: white;
        text-decoration: none;
      }
      .item:nth-child(2) {
        margin-left: 100px;
      }
    </style>
        <div class="container">
              <a href="#inicio" class="item item-1">Inicio</a>
              <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>

Con esta propuesta:

  • Puedes dejar a todos los item dentro de un solo contenedor
  • Evitas tener que usar un segundo contenedor interno para agrupar del 2do al 4to elemento
  • tu maquetación en flexbox puede encajar perfecto y continuarla con un sistema de rejilla superior que tengas con CSS Grid
1
  • 1
    Una respuesta excelente! Una observación: puedes utilizar .item:nth-child(2) {margin-left: auto;} y en este caso necesitas un padding para los items.
    – enxaneta
    Commented el 18 jun. 2020 a las 14:11
0

Quizás no he entendido bien la pregunta, pero con CSS Grid puedes poner un item donde tu quieras dentro de la rejilla, solo tienes que manipular grid-colum: [linea Inicial] / [linea final], tambien puedes hacer lo mismo con las Rows

          .item:nth-child(2) {
            grid-column: 1/2;
          }
        

Flexbox y Grid, se complementan. Con Grid puedes modificar la posición de las celdas, las áreas, las filas y las columnas con tan solo indicarle donde comienza y termina cada una de ellas

0

Yo le asignaría 1 fracción al primer hijo y utilizaria un repeat para darle los 100px que quieres a los demás hijos, ya con el a:frist-of-type lo mueves a donde quieras.

   .container a:first-of-type{
        text-align: left;
       
    }
    
    .container{
        margin: 50px auto;
        background-color: red;
        display: grid;
        grid-template-columns: 1fr repeat(3, 100px); 
        grid-template-rows: 50px;
        grid-gap: 15px;
        line-height: 50px;
        justify-content: end;
        padding: 0 20px;
        
    }

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.