Responsive CSS Grid with NO MEDIA QUERIES!

by | Mar 18, 2020 | 0 comments

Responsive CSS Grid with NO MEDIA QUERIES!

by | Mar 18, 2020 | CSS Tips and Tricks | 0 comments



https://skl.sh/designcourse23 – First 500 people to sign up will get their first 2 months free!
— Today, I’m going to show you how to use just TWO CSS grid properties to create a fully responsive image gallery without the use of media queries. In the past, you would have to create a whole slew of media queries at various breakpoints to overwrite certain CSS properties. With this technique, none of that is necessary. Very cool stuff!

Inspiration for this tutorial:
https://andy-bell.design/wrote/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/

Codepen for this tutorial:

Spec for some of the properties discussed:
https://drafts.csswg.org/css-grid/#auto-repeat

Let’s get started!

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!

source