Css grid for loop

#1

Hello !
I’ve been playing around with Jekyll for the past 2-3 weeks, and i kinda fell for it. The more you play, the more you love it. So i’ve decided to make myself a personal portfolio that i can send when applying for jobs.

I decided to try something new and went for the css grid responsive layout. But i am having a hard time figuring out how to display the grid with the for loop. Could someone share an example ? What i’m trying to acchive is a 4 column grid with 4 rows, possibly with pagination.

#2

not sure what you mean by using a for loop in the css - why? is this a liquid/jekyll thing or a sass thing?

what purpose is the for loop? to show posts?

#3

I want to loop through posts/projects etc. , not in the css. I want to use CSS Grid in order to make the page responsive. It’s just that i’ve never worked with it before. I usually use Bootstrap or Foundation.
Maybe i need to read the Css Grid docs a bit more before continuing.

#4

I’d suggest prototyping your layout first to get the HTML markup and CSS locked down. Then you can start breaking it up into Jekyll _layouts, _includes and a for loops.

I use CSS grid on my site just fine with Jekyll. It’s more of a HTML/CSS thing than anything Jekyll cares about.