To do so, I make all the li‘s 100% wide and remove their left margin. For this example, I’ve decided to turn the grid into one column at 480px wide (typical mobile breakpoint). The icing on the cake is a few simple media queries. This way you can change the ul class to dictate how many columns you want. Now that we have our li widths, we’ll create 3 separate classes for them. Now we need a little math to figure out the li widths for each grid: Margin-left: -2.5% /* should match li left margin */ This translates into a left margin of 2.5% for each li and a negative left margin of 2.5% for the ul. In this example, I’ve chose a universal margin of 2.5% for all grids. To create a grid with spacing (gutters) we need to also accommodate for margins. For example, if we have 4 columns they should all equal 25% width. The whole point of responsive grids is to do perfect math. I’ve added some extra li styling to make the grid look nice 🙂 What? I know, it shocked me at first too, but it works! And the double font-size declaration is for our old friend IE (Internet Explorer doesn’t recognize rem units, so the 16px is a fall-back). Normally, most web developers would float to get a “grid effect.” Instead, I’ve used the display: inline-block approach with a nice little hack – we set our ul to font-size: 0px and then our li‘s to font-size: 16px AND font-size: 1rem. There’s a few critical things to understand here: 1) Display vs. Now that we have our markup, we’ll add some styling to make our grid responsive. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Note: these are all optional, you could easily create this grid with just images inside of the li‘s. Inside each li we’ll throw in an image, an h3, and a p for some content. Our HTML is a simple unordered list with the class of rig –. Now that we know why they’re useful, let’s dig in! The HTML

Image grids are used all over the web – for pictures, products, profiles… you name it! Why? Because they’re a great solution for displaying rows and columns of visual data. No fancy dancy JavaScript or frameworks needed, just good ‘ole HTML and CSS. Today we’re going to build a responsive image grid using CSS.

Responsive grids using html css