WP Easy Grid

A simple WordPress plugin based on CSS Grid to help you easily make grid layouts in your pages.

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
12

Learn how to use this plugin and check out some examples below.

How To Use

WP Easy Grid let’s you easily create grid layouts in your pages.

You need to download the plugin, upload it to your plugin directory and activate it from your WP dashboard.

A grid row created by this plugin is based on 12 parts, which means you can divide a container into 12 equal parts. One line of columns is called easy_grid and each column in it is called cell.

To make a column of 2 equal cells, you’ll need 2 parts that have 6 cells each. 6 + 6 = 12

[easy_grid] [cells_6] PART 1 [/cells_6] [cells_6] PART 2 [/cells_6] [/easy_grid]
PART 1
PART 2

Similarly, to make a column of 3 equal cells, you’ll need 3 parts that have 4 cells each. 4 + 4 + 4 = 12

[easy_grid] [cells_4] PART 1 [/cells_4] [cells_4] PART 2 [/cells_4] [cells_4] PART 3 [/cells_4] [/easy_grid]
PART 1
PART 2
PART 3

Or you could have 2 columns that aren’t equal, say 1/3 and 2/3 4 + 8 = 12

[easy_grid] [cells_4] PART 1 [/cells_4] [cells_8] PART 2 [/cells_8] [/easy_grid]
PART 1
PART 2

There’s a new button “Easy Grid” at the top of your WP Editor.
To add grids and cells, you need to click the button and select from the options.


Please, pay attention not to have additional paragraphs (<p>) or other HTML tags between grid cells. It will break the grid layout:
[easy_grid][cells_6]...[/cells_6]<p> </p>[cells_6]...[cells_6][/easy-grid]
[easy_grid][cells_6]...[/cells_6][cells_6]...[cells_6]<p> </>[/easy-grid]

But you can have any element inside the cells:
[easy_grid][cells_6]<p> a paragraph inside a grid cell </p>[/cells_6][cells_6]<div> a div inside a grid cell </div>[cells_6][/easy-grid]

Grid Examples

2 cells
2 cells
2 cells
2 cells
2 cells
2 cells
3 cells
3 cells
3 cells
3 cells
4 cells
4 cells
4 cells
6 cells
6 cells
1 cell
2 cells
3 cells
3 cells
2 cells
1 cell
1 cell
2 cells
6 cells
2 cells
1 cell
3 cells
6 cells
3 cells
2 cells
8 cells
2 cells
2 cells
2 cells
8 cells
8 cells
2 cells
2 cells
8 cells
4 cells
2 cells
10 cells
5 cells
2 cells
5 cells
9 cells
3 cells

Each line above corresponds to a code line below. Check them out, it’s quite simple.

[easy_grid class="alternate text-center"] [cells_2] 2 cells [/cells_2] [cells_2] 2 cells [/cells_2] [cells_2] 2 cells [/cells_2] [cells_2] 2 cells [/cells_2] [cells_2] 2 cells [/cells_2] [cells_2] 2 cells [/cells_2] [/easy_grid]
[easy_grid class="alternate text-center"] [cells_3] 3 cells [/cells_3] [cells_3] 3 cells [/cells_3] [cells_3] 3 cells [/cells_3] [cells_3] 3 cells [/cells_3] [/easy_grid]
[easy_grid class="alternate text-center"] [cells_4] 4 cells [/cells_4] [cells_4] 4 cells [/cells_4] [cells_4] 4 cells [/cells_4] [/easy_grid]
[easy_grid class="alternate text-center"] [cells_6] 6 cells [/cells_6] [cells_6] 6 cells [/cells_6] [/easy_grid]
[easy_grid class="alternate text-center"] [cells_1] 1 cell [/cells_1] [cells_2] 2 cells [/cells_2] [cells_3] 3 cells [/cells_3] [cells_3] 3 cells [/cells_3] [cells_2] 2 cells [/cells_2] [cells_1] 1 cell [/cells_1] [/easy_grid]
[easy_grid class="alternate text-center"] [cells_1] 1 cell [/cells_1] [cells_2] 2 cells [/cells_2] [cells_6] 6 cells [/cells_6] [cells_2] 2 cells [/cells_2] [cells_1] 1 cell [/cells_1] [/easy_grid]
[easy_grid class="alternate text-center"]  [cells_3] 3 cells [/cells_3] [cells_6] 6 cells [/cells_6] [cells_3] 3 cells [/cells_3] [/easy_grid]
[easy_grid class="alternate text-center"]  [cells_2] 2 cells [/cells_2] [cells_8] 8 cells [/cells_8] [cells_2] 2 cells [/cells_2] [/easy_grid]
[easy_grid class="alternate text-center"]  [cells_2] 2 cells [/cells_2] [cells_2] 2 cells [/cells_2] [cells_8] 8 cells [/cells_8] [/easy_grid]
[easy_grid class="alternate text-center"]  [cells_8] 8 cells [/cells_8] [cells_2] 2 cells [/cells_2] [cells_2] 2 cells [/cells_2] [/easy_grid]
[easy_grid class="alternate text-center"]  [cells_8] 8 cells [/cells_8] [cells_4] 4 cells [/cells_4] [/easy_grid]
[easy_grid class="alternate text-center"] [cells_2] 2 cells [/cells_2] [cells_10] 10 cells [/cells_10] [/easy_grid]
[easy_grid class="alternate text-center"]  [cells_5] 5 cells [/cells_5] [cells_2] 2 cells [/cells_2] [cells_5] 5 cells [/cells_5] [/easy_grid]
[easy_grid class="alternate text-center"] [cells_9] 9 cells [/cells_9] [cells_3] 3 cells [/cells_3] [/easy_grid]

Grid & Cell Properties

The WP Easy Grid shortcode looks like this:

[easy_grid class="" id=""] ... [/easy_grid]

You can assign classes and an ID to the grid “div” element and define styles on your own.
However, there are several predefined classes to make it easies to add layouts to your pages. Check them out below:

Text Alignment

 default 
2 cells
2 cells
2 cells
2 cells
2 cells
2 cells
 class="text-center" 
2 cells
2 cells
2 cells
2 cells
2 cells
2 cells

Bordered Cells

 default 
2 cells
2 cells
2 cells
2 cells
2 cells
2 cells
 class="bordered" 
2 cells
2 cells
2 cells
2 cells
2 cells
2 cells

Cell Padding

 default 
2 cells
2 cells
2 cells
2 cells
2 cells
2 cells
 class="has_padding" 
2 cells
2 cells
2 cells
2 cells
2 cells
2 cells

Grid Gaps

 default gap: 10px 
2 cells
2 cells
2 cells
2 cells
2 cells
2 cells
 class="no-gap" 
2 cells
2 cells
2 cells
2 cells
2 cells
2 cells
 class="big-gap" 
2 cells
2 cells
2 cells
2 cells
2 cells
2 cells

Alternating Cell Backgrounds

 default 
2 cells
2 cells
2 cells
2 cells
2 cells
2 cells
 class="alternate" 
2 cells
2 cells
2 cells
2 cells
2 cells
2 cells

Combining Properties

 class="alternate bordered big-gap text-center" 
2 cells
2 cells
2 cells
2 cells
2 cells
2 cells
 class="bordered has_padding text-center" 

Grid Columns

Some of the grid cells are used more than the others, so I made more intuitive names for them.
For example, instead of useing [cells_6] you can use [half_grid], instead of [cells_4] you can use [third_grid], instead [cells_4] – [fourth_grid], and [cells_2] – [sixth_grid].

Check out the examples below:

[easy_grid class="bordered text-center"][half_grid]ONE HALF[/half_grid][half_grid]ONE HALF[/half_grid][/easy_grid]
ONE HALF
ONE HALF
[easy_grid class="bordered text-center"][third_grid]ONE THIRD[/third_grid][third_grid]ONE THIRD[/third_grid][third_grid]ONE THIRD[/third_grid][/easy_grid]
ONE THIRD
ONE THIRD
ONE THIRD
[easy_grid class="bordered text-center"][fourth_grid]ONE FOURTH[/fourth_grid][fourth_grid]ONE FOURTH[/fourth_grid][fourth_grid]ONE FOURTH[/fourth_grid][fourth_grid]ONE FOURTH[/fourth_grid][/easy_grid]
ONE FOURTH
ONE FOURTH
ONE FOURTH
ONE FOURTH
[easy_grid class="bordered text-center"][sixth_grid]ONE SIXTH[/sixth_grid][sixth_grid]ONE SIXTH[/sixth_grid][sixth_grid]ONE SIXTH[/sixth_grid][sixth_grid]ONE SIXTH[/sixth_grid][sixth_grid]ONE SIXTH[/sixth_grid][sixth_grid]ONE SIXTH[/sixth_grid][/easy_grid]
ONE SIXTH
ONE SIXTH
ONE SIXTH
ONE SIXTH
ONE SIXTH
ONE SIXTH

3 ONE THIRD cells, 1st and 3rd are empty, the 2nd is positioned at the center.

[easy_grid class="text-center"][third_grid][/third_grid][third_grid]ONE THIRD[/third_grid][third_grid][/third_grid][/easy_grid]
ONE THIRD

Check out the bordered cells:

ONE THIRD

or on the contrary:

ONE THIRD
ONE THIRD

or

2 empty “Fourths” at each side

and so on…

More Examples

2 columns
Lorem ipsum dolor sit amet, consectetur adipi sci elit, sed do eiusmod tempor incididunt ut laboret dolore magna aliqua. Ut enim ad minim vendiam, quis nostrud exercitation ullamco labor nisi utasp aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipi sci elit, sed do eiusmod tempor incididunt ut laboret dolore magna aliqua. Ut enim ad minim vendiam, quis nostrud exercitation ullamco labor nisi utasp aliquip ex ea commodo consequat.
3 columns
Lorem ipsum dolor sit amet cons ectetur adipi scing elit, sed eius mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost rud exercitation ullamco labor ut ex ea commodo consequat.
Lorem ipsum dolor sit amet cons ectetur adipi scing elit, sed eius mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost rud exercitation ullamco labor ut ex ea commodo consequat.
Lorem ipsum dolor sit amet cons ectetur adipi scing elit, sed eius mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost rud exercitation ullamco labor ut ex ea commodo consequat.
4 columns
Lorem ipsum dolor sit amet cons ectetur adipi scing elit, sed eius mod tempor incididunt utspa labore et dolore magna aliqua. Ut enim adkinp minim veniam, quismu nost rud fexercitation ullamco labor ut ex ea commodo consequat.
Lorem ipsum dolor sit amet cons ectetur adipi scing elit, sed eius mod tempor incididunt utspa labore et dolore magna aliqua. Ut enim adkinp minim veniam, quismu nost rud fexercitation ullamco labor ut ex ea commodo consequat.
Lorem ipsum dolor sit amet cons ectetur adipi scing elit, sed eius mod tempor incididunt utspa labore et dolore magna aliqua. Ut enim adkinp minim veniam, quismu nost rud fexercitation ullamco labor ut ex ea commodo consequat.
Lorem ipsum dolor sit amet cons ectetur adipi scing elit, sed eius mod tempor incididunt utspa labore et dolore magna aliqua. Ut enim adkinp minim veniam, quismu nost rud fexercitation ullamco labor ut ex ea commodo consequat.
6 columns
Hello world!
¡Hola mundo!
Hola món!
Hej Verden!
Chào th? gi?i!
Doctor Who

1/3 + 2/3
Lorem ipsum dolor sit amet cons ectetur adipi scing elit, sed eius mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost rud exercitation ullamco labor ut ex ea commodo consequat. Ut enim ad minim veniam, quis nost rud exercitation ullamco labor ut ex ea commodo consequat. Ut enim ad minim veniam, quis nost rud exercitation ullamco.
7/12 + 5/12
Lorem ipsum dolor sit amet cons ectetur adipi scing elit, sed eius mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost rud exercitation ullamco labor ut ex ea commodo consequat. Ut enim ad minim veniam, quis nost rud exercitation ullamco labor ut ex ea commodo consequat. Ut enim ad minim veniam, quis nost rud exercitation ullamco.
1/6 + 5/6
Lorem ipsum dolor sit amet cons ectetur adipi scing elit, sed eius mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost rud exercitation ullamco labor utexea comm.

and so on …