3 column preview cards using CSS Grid

Hey @raf0411 🙂

Just wonderful solution and Its really look like a pixel perfect solution that's why I checked your source code and there I found some common problems and you really easily can fix them

• <h1> tag :

Every page only need one <h1> tag because <h1> tag is for page title and every page only had one title.

H1 tags help Google to understand the structure of a page. So if you're using H1s as Google recommends for your page title or content heading, your H1 is effectively telling Google “here's what my page is about.

and in your solution you used <h1> tag for three time and there instead of <h1> tag you can use a <h2> tag.

and you can use <h1> tag with a sr-only class

<h1 class="sr-only">3 column preview card component</h1>

CSS :

.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

• your question (div is not centered) :

for this particular solution you can hard code the value of container and for more info you also can take a look of my solution

Hope that was helpful for you...