In this article, I'll teach you how to use CSS Grid to create a super cool image grid which varies the number of columns with the width of the screen.
And the most beautiful part: the responsiveness will be added with a single line of CSS.
We're going to use 'responsive design' principles (CSS @media queries) to detect if the screen is smaller than the maximum squishitude of our table. If it is, we're going to reformat the table. We're being good little developers and using Plain Ol' Semantic Markup here for our table. Bare bones example. Compress 1 0 1 – image compression socks. CSS Reference CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support Responsive Web Design - Media Queries.
This means we don't have to clutter up the HTML with ugly class names (i.e. col-sm-4, col-md-8) or create media queries for every single screen size.
Pure CSS Responsive Accordion Table. Cheers more options on a responsive css table layout and by more we meant that you have a different effect in this one. For a big screen device like laptop or even a table the initial layout is fine. However its everyone's concern regarding the mobile view. In this section on how to make responsive images in CSS, I'll explore some CSS elements which can help us in rendering the best image for the user. Object-Fit and Object-Position Properties To Make Responsive Images In CSS. The first property that will help us in achieving this aim is object-fit property. Laurel is a beautiful and fully responsive CSS template designed and developed for mobile app startups. It is best suited for mobile-based products. It can be customized easily to be different designs as per your needs and purposes. It illustrates an iPhone mockup with nice animations.
If you want to learn to build responsive websites on a professional level, you can consider checking out Scrimba's responsive web design bootcamp, as it takes students from beginner to advanced through 15 hours of interactive tutorials.
Now let's jump into it!
The setup
For this article, we'll continue on with the grid we used in my first CSS Grid article. Then we'll add the images at the end of the article. Here's how our initial grid looks:
Here's the HTML:
And the CSS:
Note: the example also has a little bit of basic styling, which I won't go into here, as it's got nothing to do with CSS Grid.
If this code confuses you, I'd recommend you to read my Learn CSS Grid in 5 minutes article, where I explain the basics of the layout module.
Let's start by making the columns responsive.
Basic responsiveness with the fraction unit
CSS Grid brings with it a whole new value called a fraction unit. The fraction unit is written like fr, and it allows you to split the container into as many fractions as you want.
Let's change each of the columns to be one fraction unit wide.
What happens here is that the grid splits the entire width into three fractions and each of the columns take up one unit each. Here is the result:
If we change the grid-template-columns value to1fr 2fr 1fr, the second column will now be twice as wide as the two other columns. The total width is now four fraction units, and the second one takes up two of them, while the others take up one each. Here's how that looks:
In other words, the fraction unit value makes it super easy for you to change the width of the columns.
Advanced responsiveness
However, the example above doesn't give us the responsiveness we want, as this grid will always be three columns wide. We want our grid to vary the number of columns with the width of the container. To achieve that, you'll have to learn three new concepts.
repeat()
We'll start with the repeat() function. This is a more powerful way of specifying your columns and rows. Let's take our original grid and change it to using repeat():
In other words, repeat(3, 100px) is identical to 100px 100px 100px. The first parameter specified how many columns or rows you want, and the second specifies their width, so this will just give us the exact same layout as we started out with:
auto-fit
Then there's auto-fit. Let's skip having a fixed amount of columns, and rather replace 3 with auto-fit.
This results in the following behaviour:
The grid now varies the number of columns with the width of the container.
It simply tries to fit as many 100px wide columns into the container as possible.
However, if we hard code all columns to be exactly 100px, we'll never get the flexibility we want, as they'll rarely add up to the full width. As you can see on the gif above, the grid often leaves white space on the right-hand side.
minmax()
The final ingredient we need in order to fix this is called minmax(). We'll simply replace 100px with minmax(100px, 1fr). Here's the final CSS.
Notice that all the responsiveness happens in a single line of CSS.
This results in the following behaviour:
And as you can see that works perfectly. The minmax() function defines a size range greater than or equal to min and less than or equal to max.
So the columns will now always be at least 100px. However, if there is more available space, the grid will simply distribute this equally to each of the columns, as the columns turn into a fraction unit instead of 100 px.
Adding the images
Now the final step is to add the images. This has nothing to do with CSS Grid, but let's still look at the code.
We'll start off by adding an image tag inside of each of the grid items.
To make the image fit into the item, we'll set it to be as wide and tall as the item itself, and then use object-fit: cover;. This will make the image cover its entire container, and the browser will crop it if it's needed.
Which ends up like the following:
And that's it! You now know one of the most complex concepts in CSS Grid, so give yourself a pat on the back.
Browser support
Before we end, I also need to mention browser support. At the time of writing this article, 93% of global website traffic supports CSS Grid, and it's climbing. It's becoming more and more clear that Grid is turning into a must-have skill for front-end developers. Much like what has happened with CSS Flexbox a few years ago.
If you want to learn Flexbox, Grid and responsive design once and for all, you should check out the responsive web design bootcamp on Scrimba. It'll take your beginner to advanced through interactive tutorials that are easy to follow.
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba, an interactive learning platform for learning to code.
This tutorial will guide you through creating a responsive dropdown navigation using CSS only, with the help of CSS flexbox and the 'checkbox hack'. Basic knowledge of HTML and CSS is required to follow along.
The top navigation bar is vital for any website. Mail designer 365 1 1 2. Most of the sites have a similar structure for a dropdown navigation menu, but differ in their styles and implementation. Here is one implementation that can be used universally – since it is responsive and doesn't need JavaScript to toggle the dropdown on mobile devices. Also, we use the 'mobile-first' approach to build this. Here is what you will learn to create by the end of this tutorial.
Let's get started.
Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Mobile First
We will be following the 'mobile-first' approach which involves designing a website starting with the mobile version first and then proceeding to design for larger screens. Read more about why mobile-first approach is important in 2020.
Setting up
Create a blank HTML document and name it index.html. Add the basic HTML skeleton. If you use Visual Studio Code, all you need to do is type '!' and hit enter. You will end up with this.
I have used ‘Font Awesome' for the hamburger menu icon on the right top. So add the following line below the title tag to be able to use this font.
Create your stylesheet and name it styles.css. Link the stylesheet to your HTML document below the Font Awesome CDN link using
I have used this below image as a logo. You can save the same as logo.png or choose to include your own.
HTML
Add the following HTML code within body
We have a header element which will form the dark navigation bar containing everything else. There is a menu-wrap div which acts as the container for the logo, navigation links and the menu icon. You will not see anything great if you open up this file in your browser yet. So, let's add some CSS.
CSS
In your styles.css, begin with some common styles for all elements:
Add these styles to the header element.
You will now see that dark navigation bar stretching the full width of the browser.
Before you proceed further, make sure you view this page in responsive mode in your browser and select any mobile device size – because we are designing for mobile first.
Now, add these styles to the menu-wrap class:
We use display:flex to make all the child elements occupy the free space available horizontally. The property justify-content is set to space-between to stretch those elements as far apart as possible.
Let's style each of those child elements one by one.
With this, we have the logo and icon in the perfect positions with correct sizes. Coming to the menu links – we need to absolutely position the whole menu below the bar on mobile phones. First add:
Now style the list and links:
Also add the hover and focus styles for links:
You should now be able to see this:
This menu should be hidden at first, and appear on click of the icon. So add these additional styles max-height, overflow and transition too, to the nav ul element:
This will hide the entire menu because max-height is 0 and overflow is hidden. The reason we don't use display:none for hiding the menu is because we need the animation effect of the menu sliding down – the dropdown effect – which can only be achieved by using the max-height property.
The 'checkbox hack'
What is this 'checkbox hack'? This is the most important part of this tutorial. Read carefully.
Now we need to toggle the menu display using only CSS – no JavaScript. Best way to do that is by using a hidden checkbox element. We use the hamburger icon as the label for this checkbox element. Once the label is clicked, the checkbox gets checked, and hence we can use the ':checked' pseudo-class selector to display the menu!
Reading this might have been an 'Aha!' moment for you or it might have left you even more confused. Either way, let us look at the implementation.
Responsive Css Templates
HTML
Responsive Css Framework
In index.html, add a checkbox element before the nav element:
NOTE: It's really important to add it before the nav, and not after. Because CSS has a selector for the next sibling, but not the previous sibling. You will understand this soon.
Also, surround the menu-icon with a label
Here, for='checkbox' makes sure that the checkbox gets checked / unchecked whenever this label is clicked.
CSS
We need to first hide the checkbox. In styles.css, add this:
Here comes the heart of the code:
The final ingredient we need in order to fix this is called minmax(). We'll simply replace 100px with minmax(100px, 1fr). Here's the final CSS.
Notice that all the responsiveness happens in a single line of CSS.
This results in the following behaviour:
And as you can see that works perfectly. The minmax() function defines a size range greater than or equal to min and less than or equal to max.
So the columns will now always be at least 100px. However, if there is more available space, the grid will simply distribute this equally to each of the columns, as the columns turn into a fraction unit instead of 100 px.
Adding the images
Now the final step is to add the images. This has nothing to do with CSS Grid, but let's still look at the code.
We'll start off by adding an image tag inside of each of the grid items.
To make the image fit into the item, we'll set it to be as wide and tall as the item itself, and then use object-fit: cover;. This will make the image cover its entire container, and the browser will crop it if it's needed.
Which ends up like the following:
And that's it! You now know one of the most complex concepts in CSS Grid, so give yourself a pat on the back.
Browser support
Before we end, I also need to mention browser support. At the time of writing this article, 93% of global website traffic supports CSS Grid, and it's climbing. It's becoming more and more clear that Grid is turning into a must-have skill for front-end developers. Much like what has happened with CSS Flexbox a few years ago.
If you want to learn Flexbox, Grid and responsive design once and for all, you should check out the responsive web design bootcamp on Scrimba. It'll take your beginner to advanced through interactive tutorials that are easy to follow.
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba, an interactive learning platform for learning to code.
This tutorial will guide you through creating a responsive dropdown navigation using CSS only, with the help of CSS flexbox and the 'checkbox hack'. Basic knowledge of HTML and CSS is required to follow along.
The top navigation bar is vital for any website. Mail designer 365 1 1 2. Most of the sites have a similar structure for a dropdown navigation menu, but differ in their styles and implementation. Here is one implementation that can be used universally – since it is responsive and doesn't need JavaScript to toggle the dropdown on mobile devices. Also, we use the 'mobile-first' approach to build this. Here is what you will learn to create by the end of this tutorial.
Let's get started.
Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Mobile First
We will be following the 'mobile-first' approach which involves designing a website starting with the mobile version first and then proceeding to design for larger screens. Read more about why mobile-first approach is important in 2020.
Setting up
Create a blank HTML document and name it index.html. Add the basic HTML skeleton. If you use Visual Studio Code, all you need to do is type '!' and hit enter. You will end up with this.
I have used ‘Font Awesome' for the hamburger menu icon on the right top. So add the following line below the title tag to be able to use this font.
Create your stylesheet and name it styles.css. Link the stylesheet to your HTML document below the Font Awesome CDN link using
I have used this below image as a logo. You can save the same as logo.png or choose to include your own.
HTML
Add the following HTML code within body
We have a header element which will form the dark navigation bar containing everything else. There is a menu-wrap div which acts as the container for the logo, navigation links and the menu icon. You will not see anything great if you open up this file in your browser yet. So, let's add some CSS.
CSS
In your styles.css, begin with some common styles for all elements:
Add these styles to the header element.
You will now see that dark navigation bar stretching the full width of the browser.
Before you proceed further, make sure you view this page in responsive mode in your browser and select any mobile device size – because we are designing for mobile first.
Now, add these styles to the menu-wrap class:
We use display:flex to make all the child elements occupy the free space available horizontally. The property justify-content is set to space-between to stretch those elements as far apart as possible.
Let's style each of those child elements one by one.
With this, we have the logo and icon in the perfect positions with correct sizes. Coming to the menu links – we need to absolutely position the whole menu below the bar on mobile phones. First add:
Now style the list and links:
Also add the hover and focus styles for links:
You should now be able to see this:
This menu should be hidden at first, and appear on click of the icon. So add these additional styles max-height, overflow and transition too, to the nav ul element:
This will hide the entire menu because max-height is 0 and overflow is hidden. The reason we don't use display:none for hiding the menu is because we need the animation effect of the menu sliding down – the dropdown effect – which can only be achieved by using the max-height property.
The 'checkbox hack'
What is this 'checkbox hack'? This is the most important part of this tutorial. Read carefully.
Now we need to toggle the menu display using only CSS – no JavaScript. Best way to do that is by using a hidden checkbox element. We use the hamburger icon as the label for this checkbox element. Once the label is clicked, the checkbox gets checked, and hence we can use the ':checked' pseudo-class selector to display the menu!
Reading this might have been an 'Aha!' moment for you or it might have left you even more confused. Either way, let us look at the implementation.
Responsive Css Templates
HTML
Responsive Css Framework
In index.html, add a checkbox element before the nav element:
NOTE: It's really important to add it before the nav, and not after. Because CSS has a selector for the next sibling, but not the previous sibling. You will understand this soon.
Also, surround the menu-icon with a label
Here, for='checkbox' makes sure that the checkbox gets checked / unchecked whenever this label is clicked.
CSS
We need to first hide the checkbox. In styles.css, add this:
Here comes the heart of the code:
The ~ symbol is the general sibling selector – which separates two selectors (#checkbox:checked and nav ul) and matches the second element only if it follows the first element. Understand the general sibling selector better with some examples here. This means, when the checkbox is checked, the menu slides down because max-height goes from 0 to a large number.
This is it! If you got everything right, clicking on the hamburger icon now makes your menu slide up and down. Neat.
Responsive Css Media Query
For larger screens
Responsive Css Table
We surely don't want the hamburger icon on larger screens where there's enough space for the links to appear directly.
Let's add some media queries for tablet size and above, to display the links directly, in place of the menu icon. In styles.css, add this media query:
Within this, first hide the menu icon
Make sure to increase the screen size in your browser to something larger than 768px in width, to see the changes next.
Now, add styles to relatively position the nav element and change its background color. Then add display:inline-flex for nav ul li to place the links next to each other.
There you go.
Congratulations! You now know how to create a responsive dropdown navigation that displays the menu links on the nav bar for larger screens, while displaying a hamburger icon for smaller screens where the icon can be toggled to display / hide the menu using pure CSS. Your newly-learned 'checkbox hack' can be put to use in other places too!
If you got stuck anywhere and couldn't achieve the expected output, here's the complete source code. Go and implement this dropdown navigation on the awesome websites you now create.
This post may contain affiliate links. See our disclosure about affiliate links here.
