FieldtypeGridSpace by carlitoselmago

A grid selector for space design.


A grid selector for space design

An input field for placing DOM elements in horizontal grids based on Bootstrap grid system.

backend example

An example of use in frontend:

frontend example


foreach($items as $item){


  $grid='grid-column-start: '.$gridcolumnstart.'; grid-column-end:'.$gridcolumnend.';';

  content.='<div data-sort="'.$item->sort.'" style="'.$grid.'">Lorem ipsum<div>';

CSS (Use the percentage of width and the amount of columns, in this example 7 columns with a 14.28% of width - 100/7 -)

.grid {
  display: grid;
  grid-template-columns: 14.28% 14.28% 14.28% 14.28% 14.28% 14.28% 14.28%;;

HTML (generated in PHP)

<div class="grid">
  <div style="grid-column-start: 1;grid-column-end: 2;" >A</div>
  <div style="grid-column-start: 3;grid-column-end: 5;" >A</div>
  <div style="grid-column-start: 7;grid-column-end: 8;" >A</div>

Version 0.1 changes:

-Now it can be used in repeater fields or on multiple instances in the same page

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Latest news

  • ProcessWire Weekly #511
    In the 511th issue of ProcessWire Weekly we'll cover the latest core updates, introduce a new third party module called Auto AVIF, and more. Read on! / 25 February 2024
  • Using date range fields in ProcessWire
    This week we'll take a detailed look at the newest addition to the ProFields set of modules: the Date Range Fieldtype and Inputfield.
    Blog / 24 November 2023
  • Subscribe to weekly ProcessWire news

“We were really happy to build our new portfolio website on ProcessWire! We wanted something that gave us plenty of control on the back-end, without any bloat on the front end - just a nice, easy to access API for all our content that left us free to design and build however we liked.” —Castus, web design agency in Sheffield, UK