Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 2 months ago

Blog Preview Card with CSS Grid

CodeByShoma•20
@CodeByShoma
A solution to the Blog preview card challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

EN
I'm proud that I was able to structure the layout in detail using CSS Grid, and also challenge myself by implementing responsive font sizes with the clamp() function.
I used CSS custom properties to manage styles more efficiently, which improved maintainability.
Additionally, separating layout roles by using .wrapper for full-width background control and .inner for content width made the structure more organized and scalable.

JP
CSS Grid を活用して細かくレイアウトを調整できたことに加えて、clamp() 関数を使ったレスポンシブな文字サイズの実装にも挑戦しました。
また、カスタムプロパティ(CSS変数)を用いることでスタイルの一元管理を行い、保守性を高める工夫もできました。
さらに、.wrapper で背景と全体の幅を調整し、.inner でコンテンツの最大幅を設定するというレイアウトの分離にも満足しています。

EN
Next time, I would like to improve how I manage spacing and layout, especially around whitespace.
I also want to review my use of class names and make them more component-oriented to enhance reusability.
Additionally, I’ll continue to refine how I use custom properties for more consistent and scalable styling.

JP
次回は、余白を含めたスペーシングやレイアウトの扱いをより丁寧に改善したいです。
また、クラス名の付け方を見直し、よりコンポーネント指向な設計を意識して再利用性を高めたいと思います。
さらに、カスタムプロパティの活用をより洗練させて、スタイリングの一貫性と拡張性を向上させたいです。

What challenges did you encounter, and how did you overcome them?

EN
One of the biggest challenges was deciding how to structure the layout using CSS Grid.
It took time to figure out the best way to manage spacing with grid-template and subgrid, especially when working with both .wrapper and .inner.
Additionally, adjusting font sizes responsively using clamp() was unfamiliar at first, but I learned how to use it through research and testing.
Breaking down the layout step by step and clearly defining roles for each class helped me solve these issues.

JP
最大の課題は、CSS Grid を使ってどのようにレイアウトを設計するかを決めることでした。
.wrapper と .inner を使いながら grid-template や subgrid でスペーシングを管理するのに時間がかかりました。
また、clamp() を使ったレスポンシブなフォントサイズの調整も初めてだったので、調査と試行を通じて理解しました。
レイアウトを段階的に分解し、クラスごとの役割を明確にすることで、これらの問題を解決できました。

What specific areas of your project would you like help with?

EN
I would appreciate any feedback on the overall structure of my CSS Grid layout.
Specifically, I'm curious if my use of .wrapper and .inner to control background and content width is a good practice.
Also, I'd love to know if my use of clamp() for responsive typography can be improved or simplified.

JP
CSS Grid レイアウト全体の構造についてフィードバックをいただけると嬉しいです。
特に、背景とコンテンツ幅を .wrapper と .inner で分けて管理している方法が良い実装かどうかが気になっています。
また、clamp() を使ったレスポンシブタイポグラフィの書き方に改善点やシンプルにする方法があれば教えてほしいです。

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on CodeByShoma's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit 1st-party linked stylesheets, and styles within <style> tags.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.