CSS interactive tutorial

Responsive Breakpoints

Live CSS

Desktop: Main content grows; widget and statistics share one row.

824px
Desktop824px
Header
Main
Statistics
Footer
layout.css
Base≥ 480px≥ 768px≥ 1024px
/* Desktop · 768-1023px */@media (min-width: 768px) {  .layout {    grid-template-columns: 11rem 1fr 1fr;    grid-template-rows: auto 1fr auto auto;    grid-template-areas:      "header header header"      "sidebar main main"      "sidebar widget statistics"      "footer footer footer";  }}