How to build a Responsive layout

Build a practical Responsive layout component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Responsive layout demo
lesson.html
1
2
3
4
5
html5 linesWrap
Preview

Terminal

Success

Ready.

Run code to see output here.

CSS code

.card-list { display: grid; gap: 16px; }
@media (min-width: 768px) {
  .card-list { grid-template-columns: repeat(3, 1fr); }
}

React version

function LessonList() {
  const topics = ["Responsive layout", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}