Aling grid items

[ricardoaguilarm]

Code, CSS and HTML:
CODEPEN: https://codepen.io/ricardorien/pen/RwjxVzw?editors=1100

How can aling, headers, p’s, and button with the image on the left side, like this using css grid?

I can’t find the way to put everything inside a row and create a distance among the elements.
Main goal:

[jonathan.roley]

Your heading is appearing above your image because you put it before the image in your html. I would recommend wrapping both the image and the text/button section in their own div. Then you won’t even have to specify grid-column for any of the elements. Here is a pen with those updates. https://codepen.io/jjroley/pen/MWOrErm?editors=1100

[ricardoaguilarm]

Thanks, but that’s gonna be a problem, because in mobile device I have this design
There would be a way to do it without change the HTML

[jonathan.roley]

Well, then you can just add a media query for when the screen is mobile-sized, and make the card-container have only one column instead of two.

@media(max-width: 800px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}

[ricardoaguilarm]

I already writte mobile version, because “mobile-first”.
So… let me change a litle bit that and see how it goes. Thanks.

[lasjorg]

Placing the image will force the heading to stack at the desktop size.

Example:

Horizontally alling width img

[ricardoaguilarm]

Your solution was perfect, as always. Thans a tons. I really have to study how that grid area: numbers, works.