Admin Responsive Grid - Mura Docs v7.1

Admin Responsive Grid

Admin Column Grouping

As of Mura CMS version 7.0, the admin area utilizes a basic css grid syntax similar to other familiar 12-column systems. Columns can be defined in widths from 1 to 12 by assigning classes like "mura-3" and "mura-6", and are grouped into rows with the class "mura-layout-row".

<div class="mura-layout-row">
  <div class="mura-4">
    <!--- 1/3 page width content here --->
  </div>
  <div class="mura-4">
    <!--- 1/3 page width content here --->
  </div>
  <div class="mura-4">
    <!--- 1/3 page width content here --->
  </div>
</div>

Automatic Half Width

Another way to split the screen in a fluid layout is to use pairs of div containers with the special "half" class, which evenly divides the given area vertically, regardless of screen width.

<div class="half">Left side content</div>
<div class="half">Right side content</div>

When used with "mura-control-group"  (see Admin Forms markup documentation), default spacing is applied to the "half" class to keep form elements uniformly arranged without crowding. 

<div class="mura-control-group half">
  <label>Left Label</label>
  <input type="text" name="left-text">
</div>
<div class="mura-control-group half">
  <label>Right Label</label>
  <input type="text" name="right-text">
</div>

Keep in mind, these conventions are specific to the Mura admin area only, and differ somewhat from the fractional grid system used in the front end layout manager and display object configurators.