1

quiero crear dos columnas a full width como ven en la imagen con css grid. He logrado hacerlo, el detalle es que coloco un width a la caja del hijo y trato de alinearla al centro y se me hecha a perder.

Pueden ver el código aquí. https://codepen.io/jhoedram/pen/wmmaeR

.columnas {
  display: grid;
  grid-template-columns:repeat(2,1fr);
  min-height: 350px;
}

.columna1 {
  background-color: orange;
  justify-self:end;
}

.columna2 {
  background-color: skyblue;
}

.content-columm {
  width: 350px;
}

body {
  padding: 0;
  margin: 0;;
}
<div class="columnas">
  <div class="columna1">
    <div class="content-columm">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="columna2">
    <div class="content-columm">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>
(ejecútenlo a pantalla completa para que vean el problema)

¿Qué puedo estar haciendo mal? Alguien me puede explicar. Desde ya, muchas gracias.

introducir la descripción de la imagen aquí

1
  • justify-self:center; hace lo que se espera, ajusta la celda al contenido y la centra. Si quieres que el div .content-columm esté centrado manteniendo el tamaño de columna1 deberías ponerle un margin:0 auto al contenido y no usar justify-self
    – user7176
    Commented el 18 abr. 2018 a las 9:47

3 respuestas 3

0

Espero haber entendido tu problemática...

Modifica tu clase:

De

.content-columm {
  width: 350px;
}

a

 .content-columm {
      width: auto;
    }
1
  • No, :( Con eso logro que el background se respete solamente. Quiero eso, pero el contenedor debe tener un width de diferentes dimensiones, de todos modos, gracias.
    – Jhoedram
    Commented el 29 mar. 2018 a las 22:34
0

Puedes probar los siguientes estilos:

* {
    padding: 0;
    margin: 0;
}

.columnas {
    display: grid;
    grid-template-columns: auto auto;
    min-height: 350px;
}

.columna1 {
    background-color: orange;
}

.columna2 {
    background-color: skyblue;
}

.content-columm {
    background: grey; /* para ver espacio ocupado por el contenido */

    margin: 10% 0 0 10%;
    width: 80%;
}

La alineación al centro del contenido de las cajas puedes lograrlo empleando margins en la clase .content-columm. Con un width en esta controlas el espacio que quieres que ocupe el contenido. Usa porcentajes en los márgenes y ancho que indiques para mantener el responsive.

PD: He movido tus estilos para body al principio usando un selector universal para que hagan de reset a todos los elementos.

3
  • Mi idea era dejar a un lado los paddings o margins, se supone que estoy usando css grid y quería lograrlo con sus mismas propiedades. La alineación quería lograrlo a través de justify-self: center, pero veo que al aplicarlo me causa un efecto raro.
    – Jhoedram
    Commented el 29 mar. 2018 a las 22:36
  • No se se está reñido usar márgenes con grid para conseguir lo que deseas, generalmente se usan combinaciones de diferentes técnicas. Saludos.
    – Orici
    Commented el 29 mar. 2018 a las 22:41
  • Si, lo sé. El Mi tema más que todo es por curiosidad, me gustaría saber por qué pasa esto.
    – Jhoedram
    Commented el 29 mar. 2018 a las 22:44
0

el tema es que no por que el item padre es grid los hijos lo seran, por lo que el problema es ese, los hijo que lo nesesiten tambien deben ser grid y todas los css nesesario para el, te dejo el resultado

body {
  padding: 0;
  margin: 0;;
}

.columnas {
  display: grid;
  grid-template-columns:repeat(2,1fr);
}

.columna1 {
  display: grid;
  background-color: #DC5437;
  color:white;
  text-align: center;
  justify-items: center;
}

.columna2 {
  background-color: skyblue;
  
}

.columna1 .content-columm{
      width: 80%;
}
<div class="columnas">
  <div class="columna1">
    <div class="content-columm"><h1>Allan loves Groove. Here’s why…</h1>
      <h3>We’ve tried everything, from Gmail on up to the enterprise level products. Nothing felt right until we found Groove.</h3> 
      <p>Allan Branch of Less Accounting</p>
      <a href="#">More customer stories</a>
    </div>
  </div>
  <div class="columna2">
    <div class="content-columm">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>

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.