Basics: creating a responsive grid

Hi Kirby community!

This is a very basic question. Sorry for that. It surely has been answered already. I think it’s not even necessarily about Kirby, yet I’m using Kirby.

I want to create or add a responsive grid to my template starting with the plainkit. I never did this before at all. Yet I have knowledge regarding HTML, CSS, Wordpress.

I feel like I just need a good starting point. It seems like there are so many ways to do it. Should I use bootstrap? Should I do it by myself, using what CSS functions/tags exactly? Is there a website that offers an easy-to-use responsive CSS grid to copy and paste? (There are many of them, but everyone is doing it a bit differently.) What is working especially well with Kirby?

Thank you

Hello & welcome,

Personally I love and have made use of the responsive grid already built into the Kirby 3 Starterkit.

It’s very well coded and highly adaptable.

This works especially well… with Kirby. :wink:

1 Like

Ok, thank you. I’ll have a look!

1 Like

Ok then, another question. I’m in the ‘home.css’ file now (assets/css/templates).

There it says (I’m leaving some lines out):

.home-grid {
  grid-template-columns: repeat(1, 1fr);

So how come that the grid is working with ‘1’ column? In the ‘home.php’ only the ‘.home-grid’ class is referenced.

Also, in the ‘home.css’ file, it says:

.home-grid li {
  --cols: 1;
  --rows: 1;

So it seems css variables are defined. Only some lines later, it says:

.home-grid li:first-child {
  --cols: 2;
  --rows: 2;
.home-grid li:nth-child(5) {
  --cols: 2;

So I don’t understand why other variables are defined here seemingly, especially because I can’t find “cols” and “rows” anywhere else or used anywhere else.

What perplexes me the most is that the outcome on the original ‘home’ site given with the starterkit looks like 3 columns.

In the ‘index.css’ file it says:

.grid {
  --columns: 12;

Yet I don’t really see that anywhere in action?

Maybe someone could take a second and explain that to me? Thank you

No one? Come on, this one is easy!


I’d say your best bet is to spend some time and get familiar with the way CSS grid works. There’s an excellent free course you can find here