Skip to content

Instantly share code, notes, and snippets.

@FutureMedia

FutureMedia/responsive-grid-1.css

Created October 16, 2022 10:40
Show Gist options
  • Save FutureMedia/94eb5fe7bc22fe406ee6cbf950187588 to your computer and use it in GitHub Desktop.
Save FutureMedia/94eb5fe7bc22fe406ee6cbf950187588 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Grid Layouts
Raw
responsive-grid-1.css
/* Simple Responsive Grid Layout */
.container {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-auto-rows: 10rem;
}
Raw
responsive-grid-2.css
/* Flexible Responsive Grid Layout with different elements size */
.container {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-auto-rows: 5rem;
grid-auto-flow: dense;
}
.horizontal {
grid-column: span 2;
}
.vertical {
grid-row: span 2;
}
.big {
grid-column: span 2;
grid-row: span 2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment