Responsive Design & Media Queries
Resize the viewport — media queries reflow the grid.
Header
Nav
Content
Sidebar
Footer
/* style.css */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .grid { grid-template-columns: 1fr; } }