Lightweight Grid Columns


Lightweight Grid Columns are super easy to use! Install and activate the plugin, then look for the columns icon within your TinyMCE toolbar (see screenshots).

Specify your desired desktop, tablet and mobile widths of the columns, add your content and then insert your shortcode into your content.

Lightweight Grid Columns uses the awesome Unsemantic Framework: (

Check out GeneratePress, our awesome WordPress theme! (

Features include:

  • Desktop grid width
  • Tablet grid width
  • Mobile grid width
  • Add custom classes
  • Add custom inline styles
  • Equal height columns


  • The columns icon in your TinyMCE editor.
  • The options inside the columns shortcode generator.
  • A look at some awesome columns!


There’s two ways to install Lightweight Grid Columns.

  1. Go to “Plugins > Add New” in your Dashboard and search for: Lightweight Grid Columns
  2. Download the .zip from, and upload the folder to the /wp-content/plugins/ directory via FTP.

In most cases, #1 will work fine and is way easier.

Perguntas frequentes

How do I add the shortcodes?
  • Make sure Lightweight Grid Columns is activated.
  • While editing your post or page, go into the “Visual Editor”.
  • Look for the columns icon (see screenshots tab).
  • Choose your desktop, tablet and mobile grid widths.
  • If you’re adding the last column in a row, check the “Last” checkbox (this is important).
What if I don’t want to use the TinyMCE button?

Fair enough! Simply add the shortcode to your content.

For example, the below will output 4 columns on desktop, 2 columns on tablet and 1 column on mobile

[lgc_column grid="25" tablet_grid="50" mobile_grid="100"]Some content[/lgc_column]

[lgc_column grid="25" tablet_grid="50" mobile_grid="100"]Some content[/lgc_column]

[lgc_column grid="25" tablet_grid="50" mobile_grid="100"]Some content[/lgc_column]

[lgc_column grid="25" tablet_grid="50" mobile_grid="100" last="true"]Some content[/lgc_column]

Take note of our last column – see the last=”true” part? Don’t forget 😉

What are my options for percentages?

This is taken directly from (

There are grid classes named grid-x where “x” is a number that represents the percentage width of each grid unit. These cover multiples of 5, up to 100 (grid-5, grid-10 … grid-95, grid-100). There are also classes for dividing a page into thirds: grid-33 and grid-66 which are 33.3333% and 66.6667% wide, respectively.

Are there any other options I can use in the shortcode?


You can use:


[lgc_column grid=”25″ tablet_grid=”50″ mobile_grid=”100″ class=”push-25″]Some content[/lgc_column]


[lgc_column grid=”25″ tablet_grid=”50″ mobile_grid=”100″ style=”padding-left:0px;”]Some content[/lgc_column]


By default, JS equal heights are set to “true”.

[lgc_column grid="25" tablet_grid="50" mobile_grid="100" equal_heights="true"]Some content[/lgc_column]


Abril 7, 2019
Great Plugin, I recently started using Gutenberg and if you could turn this into a Block that would be awesome. Maybe for Generatepress, as a feature.
Novembro 29, 2018
Love this plugin works really well. One really small point would be great if the button for columns showed up when editing a Toolset template, some kind of integration with Toolset. Its not a massive thing as you learn the code you can just manually write it but would be a nice little time saving update if it was integrated! 🙂
Julho 8, 2018
Easy to use! 1. Goto Post: Click "TEXT" editor tab and Copy your original One column text/links 2. Click "Visual" editor and scroll down just past your original text/links and add an "Horizontal Line" so there is a safe space to add your new columns Before you go back and delete the original one-column text/links. 3. Click the TinyMice editor to add your new text/links to the Lightweight Grid Columns pop-out editor box. 4.Paste all your code in the pop-out box. Do Not click "last column". 5.Set your columns ie; 25%-Desktop, 50%-Tablets, 100%-small phones which will equal 4 columns on Desktops, 2 columns on Tablets and One column on iphones, androids. 5.Now, go back to VISUAL and delete 2,3 and 4 parts of your column just keeping the code for the first part. 6. Repeat this process by pasting all your code but keeping the 2nd part of the column but delete the 1st, 3rd and 4th. 7. Do again, paste all the code but delete the 1st, 2nd and 4th part. 8. Ok, now on this last one, paste all the original code again and just delete sections 1, 2 and 3 but leave the 4th part AND make sure to check the "last column" tickbox in the TinyMice editor for the plugin when you add all the code again. This defines the 4th column as the last. --I know it sounds confusing but it's really easy and worked great for me. Cheers!
Junho 15, 2018
Were you born this cleaver or was it acquired?? You have saved me hundreds of dollars and proved to me that self-built using your foundation is better and cheaper in the long run that buying annual subscriptions to one domain wordpress solutions. I especially have come to love the agility your foundation offers if I am willing to put in the work. One quickly learns "nothing is free" and WordPress needs constant attention and nurturing that you will either pay for (as a developer or client) or learn to support yourself. Tom, thank you and the other unnamed GeneratePress people that have helped deliver an exceptional product. A word of caution: it helps to have a firm foundation in HTML5 and CSS3; a good working knowledge of PHP and JQuery; a good sense of humour and the understanding you will be generally out there on your own. Jeff
Ler todas as 37 avaliações

Contribuidores e programadores

“Lightweight Grid Columns” é software de código aberto. As seguintes pessoas contribuíram para este plugin:


“Lightweight Grid Columns” foi traduzido para 6 locales. Obrigado aos tradutores pelas suas contribuições.

Traduza o “Lightweight Grid Columns” para o seu idioma.

Interessado no desenvolvimento?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Registo de alterações


  • Move custom class value to the parent container
  • Code cleanup


  • Fix weird scroll behavior caused by transitions and matchHeight
  • Only load matchHeight on pages where columns are present with it enabled


  • Fix column class bug causing some columns not to work


  • Move margin-bottom setting to inner element so style attribute can overwrite it
  • Adjust lgc_columns_helper function to fix issue with <p> and <br /> tags around the shortcode
  • Add jQuery matchHeight to match the height of columns for better responsive user experience
  • Reduce the file size of stylesheet considerably


  • Show TinyMCE icon on all post types


  • Fix bug where TinyMCE icon wasn’t showing up if SiteOrigin Page Builder and Black Studio TinyMCE Widget were activated together
  • Add IE 7 & 8 compatibility


  • Allow line breaks inside columns


  • Initial release