Clear_All
Sublim.design

Create a grid in CSS: tutorial for easily integrating a Grid Layout.

Published on September 23, 2022

South

On a web page, image galleries often take the form of a Grid Layout. Elements are then arranged in several columns, preserving a horizontal reading order, with a result similar to that of the Pinterest site. This display style is commonly called Masonry Grid Layout.

The Grid Layout is an elegant way of positioning tiles and guaranteeing a on all screens. Its implementation can be facilitated by using a CSS Framework, a JS Script or a library compatible with JQuery (or React). The following tutorial proposes a much simpler solution, since it works solely on CSS. By using Full CSS technology, integration is considerably easier, the code lighter, the display faster and much more powerful.

Structure web pages and use HTML5 tags according to W3W (World Wide Web Consortium) recommendations

In our example, the Grid Layout will be placed inside the figure tag, an HTML5 element generally used to embed images. It is however possible to use a generic div container, but for SEO reasons, the figure tag seems more suitable. Each tile is then materialized by an div container, to which a specific formatting is applied according to the graphic content ratio:

Codeindex.html
<html>
 <head>
  <title>Masonry Grid Layout</title>
 </head>
 <body>
  <figure>
   <div class="ratio_1"><span>A</span></div>
   <div class="ratio_3"><span>B</span></div>
   <div class="ratio_2"><span>C</span></div>
   <div class="ratio_2"><span>D</span></div>
   <div class="ratio_1"><span>E</span></div>
   <div class="ratio_1"><span>F</span></div>
   <div class="ratio_2"><span>G</span></div>
   <div class="ratio_1"><span>H</span></div>
   <div class="ratio_3"><span>I</span></div>
   <div class="ratio_3"><span>J</span></div>
   <div class="ratio_2"><span>K</span></div>
 </figure>
 </body>
</html>

CSS style sheet declarations

We then determine the CSS values for each element. To make our example easier to read, we've integrated the style declarations directly between the head tags in the HTML document, rather than using a remote style sheet.

Codestyle.css
figure {
 position: relative;
 width: 50%;
 top: 0px;
 left: 50%;
 right: 50%;
 margin-left: -25%;
 grid-gap: 0px;
 grid-template-columns: repeat(3, 1fr); // Nombre de colonnes
 display: grid;
 float: left;
}
figure div {
 position: relative;
 width: 100%;
 height:0;
 margin: 0px;
 padding: 0px;
 box-sizing: border-box;
 overflow: hidden;
 float: left;
}
figure .ratio_1 {
 padding-bottom: 50%; // Images horizontales
 grid-row-end: span 1; // Hauteur du bloc
}
figure .ratio_2 {
 padding-bottom: 100%; // Images carrées
 grid-row-end: span 2; // Hauteur du bloc
 }
figure .ratio_3 {
 padding-bottom: 150%; // Images verticales
 grid-row-end: span 3; // Hauteur du bloc
 }
 figure span {
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: #c2c4c6;
 background-size: cover;
 border: 1px solid #fff;
 float: left;
}

Add a responsive preview to our project

Thanks to the CSS3 Media Queries specification, which defines stylesheet values according to the viewing device, it is possible to modify CSS settings according to screen size. In our example, we choose to adapt the width of the main block figure and reduce the number of columns on screens with a resolution of less than 1280 pixels. The Media Queries settings will be placed at the end of our style sheet.

CodeCode
@media screen and (max-width: 1280px) {
 figure {
  width: 100%;
  top: 0px;
  left: 0px;
  right: 0px;
  margin-left: 0px;
  grid-template-columns: repeat(2, 1fr);
 }
}

Complete code to run our Grid Layout

And that's it! That's all you need to create a Masonry Grid Layout in CSS. Our code is lightweight, and works without any libraries or additional ! The background-image CSS property defines the image to be used as the background for each tile.

Codeindex.html
<html>
 <head>
  <title>Masonry Grid Layout</title>
  <style>
   figure {
    position: relative;
    width: 50%;
    top: 0px;
    left: 50%;
    right: 50%;
    margin-left: -25%;
    grid-gap: 0px;
    grid-template-columns: repeat(3, 1fr);
    display: grid;
    float: left;
   }
   figure div {
    position: relative;
    width: 100%;
    height:0;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
    float: left;
   }
   figure .ratio_1 {
    padding-bottom: 50%;
    grid-row-end: span 1;
   }
   figure .ratio_2 {
    padding-bottom: 100%;
    grid-row-end: span 2;
    }
   figure .ratio_3 {
    padding-bottom: 150%;
    grid-row-end: span 3;
    }
    figure span {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #c2c4c6;
    background-size: cover;
    border: 1px solid #fff;
    float: left;
   }
   @media screen and (max-width: 1280px) {
    figure {
     width: 100%;
     top: 0px;
     left: 0px;
     right: 0px;
     margin-left: 0px;
     grid-template-columns: repeat(2, 1fr);
    }
   }
  </style>
 </head>
 <body>
  <figure>
   <div class="ratio_1"><span>A</span></div>
   <div class="ratio_3"><span>B</span></div>
   <div class="ratio_2"><span>C</span></div>
   <div class="ratio_2"><span>D</span></div>
   <div class="ratio_1"><span>E</span></div>
   <div class="ratio_1"><span>F</span></div>
   <div class="ratio_2"><span>G</span></div>
   <div class="ratio_1"><span>H</span></div>
   <div class="ratio_3"><span>I</span></div>
   <div class="ratio_3"><span>J</span></div>
   <div class="ratio_2"><span>K</span></div>
 </figure>
 </body>
</html>

Download our complete resource in ZIP format to adapt it to your project.

DownloadDownload Template — 1,6Mo
North