The Grid

What sets the Q theme’s grid apart from other WordPress themes is that it doesn’t exist. There is no predetermined grid, you configure everything according to your needs and your project. This way you can build any kind of layout using any number of columns you wish, set their width independently and place template-parts inside this grid as you wish.

The basics of a grid:

Building a grid

Let’s say for example that you want to accomplish a template that looks something like this:

layout-1-draw

It’s a pretty basic layout and pretty widely used. We are going to create a header that contains the logo and a short menu, followed by a 2nd menu, then we’ll add the content and finally the footer.

Step 1: Figure out how many columns and rows we need.

In order to build the layout pictured above, we have to first figure out how many rows and columns we need. To do that, we can simply mentally extend the lines for all our areas so they go all the way from one side to the other. The result would look like this:

layout-1-grid

What is frfr stands for “fraction”. So if we were to define all our columns as 1fr, then all columns would be equal in width. If we had 3 columns and column-1 had a width, of 1fr, column 2 had a width of 1fr and column 3 had a width of 2fr, then column 3 would be twice the size of columns 1 & 2.

 

%d bloggers like this: