I’ve been using the Semplice theme for the last few years for this website. It’s intuitive and isn’t weighed down like most WordPress builders.

An unintuitive part of Semplice is the custom grid system. It's not clear how padding settings work, so it's difficult to predict how they will look. Until now :)

I create a Figma kit for Semplice with grid styles that match Semplice's grid system. This makes it easy for Figma / Semplice users to create accurate layouts.
My kit uses a double-grid system. The hairline guides are column breakpoints and the thick guides are gutters:

• use gutter guides for content
• use hairline guides for column background colors

You can find my kit in the Figma Community

Why is the Semplice grid so confusing? It’s because the gutters between the columns are created with padding instead of margins. This means columns don’t actually have any space between them. Instead, they apply padding to the content inside the columns.

This difference mostly affects two things.

First, it mean the column background color will be wider than the content within the column. It also means there’s no gap between colored columns, which is a little unusual.

Second, it adds a little confusion to the outter padding on tablets & phones. The built-in info tip says they’ll default to 30px (tablet) & 20px (mobile). But Semplice will include half of a gutter to the outer padding. If the gutter width is 20px, then your outter padding will actually be 40px (tablet) & 30px (mobile).