Responsive Photo Gallery without media queries
New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course | Beginners Tut...
In this video I go over how to create this responsive photo gallery using only HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use CSS grid for the layout and then apply certain styling effects to make each image vary in size and location on the page.
Enjoying these tutorials? Subscribe to stay up to date with my latest content: / @angeladesign737
Codepen: https://codepen.io/angeladelise/pen/G...
In this video I show you:
0:36 - Starting HTML Code
1:13 - CSS Code
1:41 - CSS Grid
2:21 - Responsive CSS Grid
3:09 - Image CSS
4:24 - minmax()
6:26 - nth child for varying sizes
8:48 - grid-auto-flow
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: / angeladelise
#responsivecssgrid #responsivephotogallery #imagegalleryhtmlcss