WDTUTORIALS

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

Samuli Natri (Entrepreneur, WDTutorials.com founder) has been building websites since the late 90's. He attended Helsinki University Of Technology (Computer Science) and Helsinki University (Social Sciences).

Latest Tutorial CKEditor Tutorial With CodeSnippet Syntax Highlighting

Copyright @ 2018 WDTutorials.com. All rights reserved. Privacy policy.Terms Of Service.