web analytics

Publii SSG How to Create Columns or Tables with CSS Grid

Since I have been using Publii static site generator, I am learning more and more about it’s awesome capabilities and potential in building a fast loading website.

On some posts, I needed to layout columns for my content.
So how would I do this without using Bootstrap, or other library that would require another dependency.

Now in the the WYSIWYG editor, there is a table icon in which you can create a table with just a click of your mouse. I could simulate columns by not displaying the borders.

This table actually looks awesome and is easy to build in the WYSIWYG editor. Unfortunately, in testing this table in the mobile version within the browser, it isn’t quite what I was looking for many reasons. You can watch the video below to see why.

I then decided to try building columns by incorporating CSS Grid techniques.
This seemed to work well as you can see in the video.

Gerald Watanabe

Leave a Comment