Layout grid/CSS Grid

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
User avatar
crispy68
 
 
Posts: 303
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Layout grid/CSS Grid

Post by crispy68 » Mon Apr 23, 2018 10:31 pm

Hey Pablo,

Was curious if in the upcoming version if it will be possible to do the following with the layout grids or possibly with the new CSS flex grid?

Image

When the layout grid changes to stack mode, it looks like the first image. Would like to be able to do the 2nd image. Looking forward to the new version!

katman
 
 
Posts: 95
Joined: Sun Dec 21, 2008 7:02 am

Re: Layout grid/CSS Grid

Post by katman » Tue Apr 24, 2018 1:15 am

I would also like to see it be able to split from 4x to 2x to single instead of one break from 4x to 1x columns

Image

User avatar
crispy68
 
 
Posts: 303
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout grid/CSS Grid

Post by crispy68 » Tue Apr 24, 2018 1:32 am

Hey Katman,

I believe you can accomplish what you want by setting the overflow option to 'custom'.

For the heck of it, I threw together a demo. Download it here: https://tinyurl.com/y9x7q8wh

katman
 
 
Posts: 95
Joined: Sun Dec 21, 2008 7:02 am

Re: Layout grid/CSS Grid

Post by katman » Tue Apr 24, 2018 1:46 am

Hey thanks,

I was talking about not having to use breakpoints though. It would be nice to be able to have the grid layout bread down that way. Possible just by adding one more breakpoint to settings.

Image

User avatar
crispy68
 
 
Posts: 303
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout grid/CSS Grid

Post by crispy68 » Tue Apr 24, 2018 2:13 am

I see what you are saying and that would be nice but that would only work if your columns are an even number and you want it cut in half? What if your grids columns are not equal? What if I wanted only 1 column on the 2nd row rather than 2?

I think without using BP's, it would be difficult or you would have less control over how it looks. I have a tendency to still use BP's with layout grids due to the fact I like being able to adjust the size of the fonts as the screen gets smaller and you cant do that without BP's.

My hope is with the new flex grid coming in the next version that this will open up the possibilities of different layouts. :mrgreen:

User avatar
Pablo
 
Posts: 13039
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Layout grid/CSS Grid

Post by Pablo » Tue Apr 24, 2018 6:02 am

This will be possible with flex grid.

katman
 
 
Posts: 95
Joined: Sun Dec 21, 2008 7:02 am

Re: Layout grid/CSS Grid

Post by katman » Wed Apr 25, 2018 5:39 am

I was playing around with nesting grid layouts and accomplished what I was wanting above.

http://www.suzuki-katana.com/test/page1.html

katman
 
 
Posts: 95
Joined: Sun Dec 21, 2008 7:02 am

Re: Layout grid/CSS Grid

Post by katman » Wed Apr 25, 2018 5:42 am

katman wrote:
Tue Apr 24, 2018 1:15 am
I would also like to see it be able to split from 4x to 2x to single instead of one break from 4x to 1x columns

Image
I was playing around with nesting grid layouts and accomplished what I was wanting above.

http://www.suzuki-katana.com/test/page1.html

Here is the practical outworking I have been trying to do

http://www.designscience.robwilton.com/resources.html

Post Reply

Who is online

Users browsing this forum: No registered users and 7 guests