Pinegrow Community Support Forum

How to achieve this effect in pinegrow?

css
tool

#1


#2

Hi there @artimm , Well, I was waiting for someone cleverer to help you, but its been a bit quiet, so I thought I would.

It was quite easy, as I was going to cheat.

however, I couldnt, as I think I found a PineGrow bug.

so I have created a video which is based on using CSS Grid… from

now, this was the sticky point for me before answering as there are QUITE A FEW ways to go about trying to do this…I guess, and I am not versed enough in them all to show the subtle differences.

however, I decided to use CSS grid to SHOW you (with a cheating, copy and paste video) as… it works in 2 dimensions, not just one long line (like flexbox- which can be used WITH CSSGrid, not just instead off )

Other people could show you using other things.
Since you have posted this in the CSS Styling channel, not the Bootstrap channel I thought I would use this technology. (Even though I thought bootstrap would have acheived this, out of the box for you)

I modified the code with one simple change in the CSS - and then it all worked.
Strange.

So, it may be a copy and paste bug in Pinegrow and it doens actually recognise the content of FULLY Pasted page/style sheet, - until you actually EDIT it… or something else.

anyway, this is a video on how to do it, in pinegrow
NOTE - this is NOT using the normal Pinegrow techniques of block by block, but this is how to CHEAT, copy in the demo code and THEN play with/view it after, to see how it WAS done.

2018-03-11_09-36-12

well, I’m trying! and I dont know whats going ont there as the vid is 27 MB not 30!
so I will have to youtube it.
this is all taking a while.
one (or two) moments please…

gah! that tok forever.
ok, the orignal, untrimmed video is now here


#3

use flex-grow:1 on child then it will cover the blank space automatically also you need to learn to use media queries along with flexbox.


#4

I would be grateful if you show an example


#5

welcome to youtube. keep making videos on it.


#6

thanks, but that’s not what me need. the size of cats varies, but I need a fixed size


#7

Hi,
Please avoid duplicated post. You can set a fixed size for your divs and align them centered. See your other post for another answer. Good luck.


#8

___________ok, thanks!