WDTUTORIALS
menu
Django - The Easy Way Django - The Easy Way
Samuli Natri 2016.10.18
Samuli Natri is a software developer who enjoys programming games and web applications. He attended Helsinki University Of Technology (Computer Science) and Helsinki University (Social Sciences).

Drupal 8 - How To Create A Responsive Grid

Tutorial on how to create a responsive, clickable grid with Views.

I'm using a Bootstrap subtheme in this tutorial. Check How To Install Bootstrap Subtheme tutorial on how to create a subtheme.

Create Image Style

Go to admin/config/media/image-styles.

Create an image style with Scale and crop effect 300×200.

Create the View

Create an Unformatted list View Block with Image, Title, Path and Custom Text fields:

Image field settings:

Title field settings:

I added p tags around the title with rewrite results so we can target it better.

Path field settings:

Global: Custom Text settings:

Edit FORMAT: Settings and add col-md-4 class to rows:

col-sm-4 is a Bootstrap class that creates 3 columns.

Go to the view Advanced: CSS class settings and add a container-fluid class to the view:

CSS (LESS)

.view-responsive-grid {
  margin-top: 1em;
  img {
    width: 100%;
    border: 3px solid #eee;
    padding: 3px;
    border-radius: 5px;
  }
  img:hover {
    border-color: #ddd;
  }
  a {
    color: #fff;
    text-decoration: none;
  }
  p {
    display: inline;
    position: relative;
    bottom: 60px;
    left: 6px;
    background: rgba(17, 17, 17, .5);
    color: #fff;
    padding: 0.5em 0.7em;
  }
}

Place the Block

Go to admin/structure/block and Place Block above the Main page content.

Block settings:

Result