I understand that naturally it's not possible to grid fields from a single node, when using Views, and we could only display a grid if each field is coming from a different node.

Is there a module that will allow Views, somehow, to make a grid based on fields from the same\single\unique node?

I would surly prefer a way to do it with views-only, but if there is no easy\automatic way to so without installing an external module than so be it.

  • I think you are over thinking this, you can accomplish the grid with css.
    – No Sssweat
    Commented Oct 24, 2015 at 22:02
  • But these are different fields my friend, and I don't want to template that node... I want to do it from the UI.
    – user16289
    Commented Oct 24, 2015 at 23:30
  • 1
    template the view not the node, just give each field a span name and use css to grid them.
    – No Sssweat
    Commented Oct 24, 2015 at 23:53
  • Not yet @NoSssweat, I need a css code that will make the grid responsive and mobile-first. I can't let my grids to be not-responsive; is the css command "column-count: 3" suits this purpose?
    – user16289
    Commented Nov 9, 2015 at 21:59
  • Thank you very much --- I think you can delete the non-mobile-friendly part and keep only the mobile-friendly one just that it would be a little bit more easy to read to all readers... And btw small q --- Shouldn't it include media screen and (min-width), or anything at the sort of mobile-first?
    – user16289
    Commented Nov 10, 2015 at 11:17

4 Answers 4


You could use a combination of Display Suite and Views. This is not a perfect grid... but it's close. These are the steps I followed. I created a Content Type with 6 Long text fields.

  1. Install Display Suite and enable Display Suite and Display Suite UI
  2. Go to Manage Display of your Content type, click on Custom display settings and enable Full content enter image description here
  3. Click on the Layout tab and select a layout. I selected a Three column stacked - equal with layout. enter image description here

  4. I distributed the fields into the three columns (Left, Middle, Right), and added the node Title in the Header area

  5. Create a View of Content. In display format be sure to select Unformatted list of full posts

  6. Click on the Content link under Format. Be sure to select Display Suite. Select Full Content enter image description here

  7. Visit your View. This is what it looks like (I am showing two nodes, with 6 fields each): enter image description here

Now, if you want to make it look nice (e.g. more space between columns), you will have to use css - no way around it.

  • Looks good. BTW, are the Display-suite grid system responsive? and about stage 7, what css will you add to make some more space between the boxes? Some margin and that's it? Or maybe an extra thing?
    – user16289
    Commented Nov 8, 2015 at 18:59
  • I'm not sure if they are responsive. As for the css, for example, you could add something like box-sizing: border-box; padding-right: 2px; to the class of the grid cells to separate them slightly. In the example above fields 4, 5 and 6 were not individual cells of the grid - field 1 and 4 were in the same cell, which is not ideal. But you can define new Display Suite layouts with more cells - see ds.api.php (specifically ds_LAYOUT_KEY) and do a search for custom layout display suite.
    – argiepiano
    Commented Nov 9, 2015 at 4:30
  • Will check them, and I hope they will be responsive as part of the responsification Drupal goes to before Drupal 8 will be released: It has already been declared that all the View grids for example will be responsive by nature; I'll check it when Drupal 8 will come out and then now what is best for me.
    – user16289
    Commented Nov 9, 2015 at 5:41
  • Because Drupal 8 is coming out next week and it is most likely to include responsive mobile-first layouts to display suite, I will use this option; At least, if Views will start display grids from fields of the same nodes naturally.
    – user16289
    Commented Nov 10, 2015 at 22:21
  • 1
    @Pierre.Vriens yes it is safe now to go live/prod with Drupal 8, technically since the official release (8.0.0)
    – No Sssweat
    Commented Aug 11, 2016 at 8:45

For ALL your fields you need to do this

  • Customize field HTML
  • Select SPAN as your HTML element
  • type your class name. Example: cool (use the same name for all your fields)
  • Uncheck Add default Classes

enter image description here


  • use Unformatted List

For Show: click on settings

  • Uncheck provide default field wrappers elements

enter image description here

Now all you need is to add css to your drupal theme .css file

To Make it Mobile friendly

Add a class name to your entire view (ex: test) (see screenshot below)

In css, for width use %, ex:

.test { border: solid red; width: 90%; }
.cool  { border: solid green; width: 200px; float: left;  }

enter image description here


If you want to add a class for each row.

  • Format click on settings

  • Enter a name for row class

  • Then in CSS

    .example { border: solid blue; }

enter image description here

  • I seem to understand you use it for like a quick-and-dirty prototype kind of demo or something. Am I close? That is correct. It was a quick demo of the code above it. Unfortunately, when jsfiddle improved/changed their website recently, seems like all the existing fiddles were lost.
    – No Sssweat
    Commented Dec 18, 2015 at 20:14
  • MERCI for explaining/confirming ... what I always fear about in using such "free" (of charge), I guess, sites. So it seems like "my" (silly?) approach to prepare some demo on my own site is not that bad (even though it's way more "expensive" of course as "free"). So what do you do then with answers where such links get broken? Remove the link? Create a new one? Something else? Variation: if someone else would run into such broken link, should they flag that, try to repair that, add a comment targeted to you? Remember: "suggested edits" should never change the OPers intend (hm, hm). Commented Dec 18, 2015 at 20:23

I usually do this manually but I believe you could use Display Suite for this (free video on drupalize.me).

Many responsive starter themes provide "display suite layouts" out of the box now.

There's even this: https://www.drupal.org/project/ds_bootstrap_layouts

  • And what about a way to do that with Views only?
    – user16289
    Commented Oct 25, 2015 at 14:30
  • Added a new answer for this (to get better formatting).
    – gkom
    Commented Oct 25, 2015 at 15:15

Option 1. Edit the field, under Style Settings check "Customize field and label wrapper HTML" and add your class.

Option 2. Add a new "custom text field" in your view and add html for your other fields using "replacement patterns". i.e.

<article class="grid6">
  <div class="my-class">[body]</div>

How to add a custom text field

The custom text field gets added to the result by Views. You don't add it to your content type. You add it to your view as usual.

  1. Edit your view and click "add" field.
  2. Search for "Global: Custom text" and click Apply.
  3. On the text area for this field add your html and replacement patterns.

For each field that you reference in your "custom text field" you will most probably want to select "Exclude from display".

Note: You can only reference fields that are listed 'before' your custom field.

  • About option 2 --- Is this "Custom text field" a separate one from the Node-fields? Thanks. If it is, can you please give a few words in brief how to add it in the Views module? (Quick Google search didn't give an answer and I remember myself trying to find such a thing in the Views module).
    – user16289
    Commented Oct 26, 2015 at 7:39
  • See my edited answer.
    – gkom
    Commented Oct 26, 2015 at 11:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.