Answers.Body: <p><code>templates/layouts/_cp.html</code> has </p>
  
  <pre><code>&lt;div class="grid"&gt;
    &lt;div class="item"&gt;
      &lt;div class="pane"&gt;
  </code></pre>
  
  <p>nested inside the <code>{% block main %}</code> (line  207) and <code>templates/entries/_edit.html</code> is overriding that <code>block main</code>, so those grid,item,pane divs get overridden too.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-29T00:35:37.330Z
Answers.Text: Bingo! Looked right past that. Using {% block main %} works as needed.
Answers.UserDisplayName: Ben Parizek
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-28T22:49:17.770Z
Answers.LastActivityDate: 2014-08-28T22:49:17.770Z
Answers.UserDisplayName: Marion Newlevant
Answers.Body: <p>Hey Ben if you are using <code>{% extends '_layouts/cp' %}</code> how about something like this?</p>
  
  <pre><code>{% set sidebar %}
       &lt;div class="buttons"&gt;
             &lt;a href="{{ url('') }}"&gt;&lt;div class="btn submit add icon"&gt;New Button&lt;/div&gt;&lt;/a&gt;
       &lt;/div&gt;
  {% endset %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-28T16:16:21.043Z
Answers.Text: Thanks @Adam.  In my tests {% set sidebar %} controlled the column to the left of the layout like on the Entries listing page, where I am hoping to have a column on the right of the layout, like on the Edit an Entry page.
Answers.UserDisplayName: Ben Parizek
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-28T20:21:10.253Z
Answers.Text: Ah gotcha. Yes I'd be interested in this too.
Answers.UserDisplayName: Adam McCombs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-28T15:37:05.223Z
Answers.LastActivityDate: 2014-08-28T15:37:05.223Z
Answers.UserDisplayName: Adam McCombs
Body: <p>I have a plugin where I'd like my CP tab to output two columns just like the entry page.  On the left, would be the body and then there would be a nice dividing gap and then on the right there would be a aside column.</p>
  
  <p>I've tried to copy the way that the Entry Edit page works but I must be missing something.</p>
  
  <p>Extending <code>_layouts/cp</code> wraps everything on the page with the following three divs which don't seem to get output at all on the Entry Edit page:</p>
  
  <pre><code>&lt;div class="grid"&gt;
      &lt;div class="item"&gt;
          &lt;div class="pane"&gt;
               ...
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How does the entry page get rid of these divs?  I'm not seeing anything obvious in the templates.</p>
  
  <p><strong>EDIT</strong> To be clear, I can create the layout that I want, except for the fact that the layout I want gets wrapped in the above code and makes the gutter disappear and messes up the padding around the two columns on the page.  If I extend the {% extends '_layouts/cp' %} and remove those three divs above, just like the Edit and Entry page seems to do somehow, the page displays just as I want it to.  </p>
  
  <p>What I can't figure out is how the Entry page is getting rid of those three divs. It uses {% extends '_layouts/cp' %} and those divs do not appear on the Edit an Entry page.</p>
  
Tags: <plugin-development><user-interface>
Title: How do you create two grid columns like the Entry Edit page within a plugin?
ThreadText: # How do you create two grid columns like the Entry Edit page within a plugin?
  
  (Asked by: username_0 on 2014-08-28)
  
  I have a plugin where I'd like my CP tab to output two columns just like the entry page. On the left, would be the body and then there would be a nice dividing gap and then on the right there would be a aside column.
  
  I've tried to copy the way that the Entry Edit page works but I must be missing something.
  
  Extending `_layouts/cp` wraps everything on the page with the following three divs which don't seem to get output at all on the Entry Edit page:
  
  ```
  <div class="grid">
      <div class="item">
          <div class="pane">
               ...
          </div>
      </div>
  </div>
  
  ```
  
  How does the entry page get rid of these divs? I'm not seeing anything obvious in the templates.
  
  **EDIT** To be clear, I can create the layout that I want, except for the fact that the layout I want gets wrapped in the above code and makes the gutter disappear and messes up the padding around the two columns on the page. If I extend the {% extends '\_layouts/cp' %} and remove those three divs above, just like the Edit and Entry page seems to do somehow, the page displays just as I want it to.
  
  What I can't figure out is how the Entry page is getting rid of those three divs. It uses {% extends '\_layouts/cp' %} and those divs do not appear on the Edit an Entry page.
  
  **Tags:** plugin-development, user-interface
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2014-08-28. Score: 1 | Accepted answer
  
  `templates/layouts/_cp.html` has
  
  ```
  <div class="grid">
    <div class="item">
      <div class="pane">
  
  ```
  
  nested inside the `{% block main %}` (line 207) and `templates/entries/_edit.html` is overriding that `block main`, so those grid,item,pane divs get overridden too.
  
  > **Comments:**
  > **username_0**: Bingo! Looked right past that. Using {% block main %} works as needed.  
  
  ---
  
  ### Answer by username_2 on 2014-08-28. Score: 0
  
  Hey Ben if you are using `{% extends '_layouts/cp' %}` how about something like this?
  
  ```
  {% set sidebar %}
       <div class="buttons">
             <a href="{{ url('') }}"><div class="btn submit add icon">New Button</div></a>
       </div>
  {% endset %}
  
  ```
  
  > **Comments:**
  > **username_0**: Thanks @username_2.  In my tests {% set sidebar %} controlled the column to the left of the layout like on the Entries listing page, where I am hoping to have a column on the right of the layout, like on the Edit an Entry page.  
  > **username_2**: Ah gotcha. Yes I'd be interested in this too.  
  
  ---
  
  