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>
¿Qué puedo estar haciendo mal? Alguien me puede explicar. Desde ya, muchas gracias.
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 decolumna1
deberías ponerle unmargin:0 auto
al contenido y no usarjustify-self