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.
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.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:
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. The font-size won't respond like this when resizing the browser window. Instead they respond to the browser zoom/type size settings, such as if you press Ctrl and + together on the keyboard while in the browser. You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.
- 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.
- Responsive Modern CSS Grid Layout Before we dive into creating our responsive grid demo, let’s first introduce CSS Grid. CSS Grid is a powerful 2-dimensional system that was added to most modern.
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.
Substance alchemist 2019 1 2 torrent. 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! Twistedwave 1 20 1 – powerful audio editor. 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.
What could be the simplest form of navigation on a web page? If a horizontal responsive navigation menu popped in your mind after reading that question, that’s exactly what you’re gonna learn to create in this post.
Long gone are the days when people used to build web layouts and navigation with HTML tables. Today you can easily make stuff semantically sane, prettier, and adaptive to different screen sizes.
We all know that simple and easy navigation is one of the most important parts of a web layout. Let’s take a look at the most commonly practiced technique to design a simple navigation menu. I assume you already have the basic idea of using HTML and CSS.
Note that this is not going to have sub-menus. If you are looking for fly-out menu solutions, below are some handy resources:
The Idea of CSS-only Responsive Navigation Menu
Basically, this technique moves around using HTML lists. We’ll be using simple HTML lists to bring out a simple and easy link list. We’ll end up with a simple yet good-looking responsive navigation menu eventually.
Let me break down the concept into simple steps to make it easy to understand:
- Use a list element to form a link list
- Give it a look of horizontal menu by making it appear inline with CSS
- Add some cosmetics like colors, animation, etc. to make it more attractive–of course with CSS
I’m gonna make use of HTML5 nav element (<nav>), unordered lists (<ul>) and hyperlinks, of course.
The demonstration contains menus in different themes and color schemes. I’m covering only the default presentation in the tutorial to keep it simple.
So, let’s start with opening our favorite Text editor and write some HTML and CSS. I am, as always, using Sublime Text.
HTML
In the body section of your HTML document, add some hyperlinks within an unordered list (<ul>) and wrap it inside a <nav>. Refer the below-given code.
Note: Replace # in the hyperlinks with suitable URLs when deploying to your project.
Explanation
In our markup,
.navigation
is acting as the container for our navigation. Inside we have .menu
acting as our link list, with different child items (<li>
) that form our menu altogether.As you can see above, I’ve used classes with pretty much everything except list-items and hyperlinks. Classifying elements keeps you away from specificity in CSS, although I’d advise not to overdo it.
I prefer BEM methodology to name my classes every time I work with CSS.
Another thing you may have noticed in the above markup code are those HTML comment tags. It’s only for segregating elements from one another and marking the starting and end for each.
If you just started learning front-end, and thinking to float things to the left to form a menu–I have a note for you here. I’m gonna avoid floating our list-items to the left or right. I’ll rather be making it a flexible box for the simplicity sake.
If you still prefer to float the menu-items to left, you should use the micro clearfix hack to clear the floats. Another alternative is to make the list-items inline-block in display.
Tip: I have used CSS @support at-rule in past to have old browsers supported. There only I added my float and inline-block things, I’m not using it anymore as most of the browsers now support flexbox.
The Sassy CSS
Below given is the boilerplate I wrote to create these simple yet good-looking menus. I’m trying to keep it look as simple as possible, and that’s why I’m breaking it down in chunks.
I’ve also tried best to keep it mobile-first, and then enhanced it progressively for bigger screen sizes.
Let’s start with normalizing our lists so that they won’t add up default margin and padding to our menu. You may not need this step if you are already using a CSS reset.
Also make sure to hack the box-sizing for your document before proceeding further.
Next, set up the navigation container, the menu list, and the menu-items. Observe the code below, and we’ll take a look at each of its parts after that.
Let’s understand each of the above-mentioned properties one-by-one:
- Setting the line-height to 1 will avoid any sizing issues later if you wish to modify the menu.
- Making hyperlinks and list-items block-level makes them appear clear and wide. This way we avoid thinking much about their appearance on different screen resolutions.
- We don’t need any underline in our hyperlinks, as they don’t always look pretty.
- Making hyperlinks take the color of their parents is my way of simplifying the theming task. You may, however, take a different path if you want.
- Giving it some padding will obviously give it some size and space to breathe.
- Adding a border can help us to segregate menu-items from one another.
Our menu-items now look stacked one below the other. I captured a screenshot for you to see how it looks like when not styled for bigger viewport sizes.
Responsiveness
This step is crucial to make our navigation menu responsive to the screen or viewport size.
I’m assuming that the minimum width of our regular screen is 1024 pixels. We have already set defaults for the small screen sizes with the mobile-first approach. Now is the time to make the menu look horizontal and not stacked-up.
- Making the menu-list a flexible box does the trick for the inline menu-items.
- Border at the bottom doesn’t make sense for this horizontal order of our menu. Setting a border to the right makes it look way better for this view.
- Finally, adding a bigger padding makes it look more bigger and apt for desktop screen.
Theming
Below SCSS code snippet helps you colorize your navigation menu hassle-free. Just feed color values to the variables appropriately, and you are good to go.
Responsive Css Templates
You can make it better by adding colors based on your preference and requirements. I’ve kept the demo pretty simple so that we could extend it further as well, to do multi-level menus.
Responsive Css Code
And there you have it! Your simple, yet colorful and attractive responsive navigation menu, ordered horizontally, and done purely with CSS! I’ve more thoroughly discussed stuff coming up around the same topic, and some of it is listed hereunder: