Basics: creating a responsive grid

1

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

2

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
3

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

1 Like
5

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

6

No one? Come on, this one is easy!

Greetings

7

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 https://cssgrid.io