How to Setup Grid Framework

Written by: Linda White | Animal Science

Grid framework is what you use to create the page layout of your webpages, the positioning of the pictures and information.  With Drupal you have complete control of the layout by using the grid framework.  One of the important aspects of websites these days is that they need to be as mobile friendly as possible. The Grid Layout icon in the WYSIWYG editor does not address the mobility part of the web design.

HTML gives us complete control over the mobility of the website and here is a tested way that is really as simple as copy and paste.

HTML simple, really it is if you follow the steps below.

  1. Decide how you want your page to look and what layout you want to use.  Examples are here.
    You can divide your screen by the following:
    1. Halves
    2. Thirds
    3. Fourths
    4. Fifths
    5. Sixths
    6. Sevenths
    7. Eighths
    8. Ninths
  2. You can use pictures, text, documents, links or videos in the grids.
  3. You can change the layout on every row of your webpage.
  4. Once you have your layout decided on you find the layout you want in the text document that is attached below, highlight the grid layout, copy and paste it into the HTML editor on the page you want it to be.  Repeat for each row you want to create.
  5. Once you have the layout pasted into the HTML editor you can then change back to the WYSIWYG editor to add information.
Here is the tool (TXT 69 kb) that makes the process very simple you simply find the layout you want, copy and paste it.
Explanation of a few things will make it even easier:  Here is a sample of a layout to divide your page into thirds.

With no breakpoints:

<section class="wdn-grid-set">
<div class="wdn-col-one-third">e</div>
<div class="wdn-col-one-third">e</div>
<div class="wdn-col-one-third">e</div>
</section>


With breakpoints:

<section class="wdn-grid-set">
<div class="bp480-wdn-col-one-third">e</div>
<div class="bp480-wdn-col-one-third">e</div>
<div class="bp480-wdn-col-one-third">e</div>
</section>

  1. Every row must be setup with the section tags.  In HTML, tags usually have two, the beginning one (example: <section class="wdn-grid-set">) and the ending one (example: </section>).  There is often more information in the beginning one such as different class= information.
  2. Breakpoint (bp) makes the grid layouts mobile friendly. There are 6 bp's available to us they are, bp480, bp640, bp768, bp960, bp1280, and bp1600; the number after bp is the lowest number of pixels the information in the row can be adjusted down to depending on the mobile device used.  The smaller the number the smaller the device it will adjust too.  Recommend you use the bp480 to accommodate the smallest mobile devices.
  3. The information of each part of the layout is shown in the <div> lines and need to end with </div>.
  4. The e before the </div> is a place holder so when you change back to WYSIWYG you know where each of the parts of the gird are located.
  5. Every part of a grid must have something in it even if that something is a space.  If part of your grid needs to be blank highlight the e and then press the space bar.  By putting at least a space in each part it will keep your grid's integrity without the space the grid is broken and the information after it will not line up correctly and sometimes it will not even show.
Here is what the thirds grid would look like after you pasted it in the HTML editor:
e
e
e

You simply highlight the e in each section and add the information or picture etc.

 Col #1 This is the first part of the thirds grid
Col #2
Picture of Pets
Col #3 And this is the last section of the thirds grid.  As you can see it will wrap around to fit the grid size.
If you want a different layout after this one simply change the layout by selecting the layout you want copy and paste it into the HTML editor and change back to the WYSIWYG editor and add your data.  Here are some examples:

Halves:


e
e


Fourths:


e
e
e
e

Sevenths:


e
e
e
e
e
e
e

You can adjust them as you need to by simply making the change of the number before the division indicator; you can have a layout that has one-seventh, then two-sevenths, then one-seventh, then one-seventh, then two-sevenths.  The only restriction is that you have to make sure that the information between the <section class="wdn-grid-set"> and the </section> add up to 1 using the fractions that you are working with.  Like the above example 1/7 +2/7+1/7+1/7+2/7 = 1  or you can say 1+2+1+1+2=7.

We have the capabilities to make upto 9 columns.

The tool has samples of the most common layouts and then gives you all of the possibilities so that you can mix and match to change the layouts to what you want.

Example:

&&&&&&&&&&&&&&&&&&&(Make your own combinations)&&&&&&&&&&&&&&&&&&&&&&&&&&&&

You can make any combination as long as it adds up to be 9

When your columns are unequal widths, you will always start out with the section parts shown below.

<section class="wdn-grid-set">

</section>

The following are the correct information for each possibility that you can copy and paste after <section class="wdn-grid-set"> and before the </section> tags
Mix and match as long as they add up to 9

<div class="bp480-wdn-col-one-ninth">e</div>
<div class="bp480-wdn-col-two-ninths">e</div>
<div class="bp480-wdn-col-three-ninths">e</div>
<div class="bp480-wdn-col-four-ninths">e</div>
<div class="bp480-wdn-col-five-ninths">e</div>
<div class="bp480-wdn-col-six-ninths">e</div>
<div class="bp480-wdn-col-seven-ninths">e</div>
<div class="bp480-wdn-col-eight-ninths">e</div>
<div class="bp480-wdn-col-nine-ninths">e</div>

Examples:
<section class="wdn-grid-set">
<div class="bp480-wdn-col-one-ninth">e</div>
<div class="bp480-wdn-col-three-ninths">e</div>
<div class="bp480-wdn-col-four-ninths">e</div>
<div class="bp480-wdn-col-one-ninth">e</div>
</section>
1+3+4+1=9
<section class="wdn-grid-set">
<div class="bp480-wdn-col-three-ninths">e</div>
<div class="bp480-wdn-col-one-ninth">e</div>
<div class="bp480-wdn-col-four-ninths">e</div>
<div class="bp480-wdn-col-one-ninth">e</div>
</section>
3+1+4+1=9
<section class="wdn-grid-set">
<div class="bp480-wdn-col-two-ninths">e</div>
<div class="bp480-wdn-col-one-ninth">e</div>
<div class="bp480-wdn-col-one-ninth">e</div>
<div class="bp480-wdn-col-five-ninths">e</div>
</section>
2+1+1+5=9

Page Feedback

Was this article helpful?