Using Modern CSS to Build a Responsive Image Grid – SitePoint

Building custom responsive layouts is always exciting. This article examines a technique that we can use to take full control of the distance between grid columns. To demonstrate this, I’ll use the example of a responsive image gallery.

For more on responsive layouts. Watch our screencast Creating Multiple Column Layouts in Flexbox.

Building a Responsive Layout

To begin with, let’s assume on large screens our gallery should look something like this:

On smaller screens (i.e. <50em), it should have the following appearance:

The markup is simple:

<div>
  <a href="path-to-the-image">
    <figure>
      <img src="path-to-the-image" alt="">
    </figure>
  </a>

  

</div>

As you probably already know, we can take advantage of different layout methods for generating the desired result. Before I examine two of those possible methods, let’s take note of our initial requirements (see previous visualizations):

• I want a 2-column layout on medium screens and smaller (i.e. <50em), and a 4-column layout on large screens (50em or above).
• The distance between columns should be 8px.

Using inline-block

I’ll first use the display:.......

Source: https://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/