Aling grid items

Code, CSS and HTML:

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:

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.

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

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;
1 Like

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

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


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