Is there a way to create column grid system (like in Bootstrap)?

#1

This is a two-part question:

  1. Is there a way to create a column grid system to use as guides to align elements in a structured way?
  2. How do you align multiple child elements with opposite anchor/alignment rules? For example, in the image attached, I am trying to keep the "Name" and "Title" elements pinned to the left of the parent container as a group and the pink box pinned to the right of the container but have the two separate groups vertically aligned within the parent container.
#2

Solved the opposite alignment issue by grouping the "Name" and "Title" into a parent element and changing the alignment axis of the entire "white box" element to horizontal.

#3

Yep, @benzo. That's the best way to accomplish it. Using "wrapper" parent elements to group things together in layout—similar to how we'd make an extra <div> on the web.

#4

@Ryan Love how Subform's layout engine uses the same layout principles found in HTML/CSS in combination with freeform design. Still would like to know if grid systems will be part of Subform. :wink:

#5

It's a good topic for an article: how grid systems can/might work in conjunction with a responsive layout engine. A lot of it can be implicit, a la http://flexboxgrid.com/.

Curious as to what exactly you'd like to see in practice. Have you had a chance to explore Figma's nested grid system?

#6

@Ryan I am not familiar with Flexbox Grid nor have I tried Figma I will look into those systems. Traditionally, I've been using grid systems in print layout design and web design as visual guides to help structure the elements on the page and to communicate this intent to collaborators on a project (i.e. other designers, developers, stakeholders...).

I can see where using a constraint system may elevate the need for a grid system but with my current knowledge of front-end development (I'm not a developer but know enough to use Bootstrap) I think that it is still necessary to insure good visual alignment of components on screen, right?

I'd like to add that the reason why I posted this question was because I was thinking that columns would have been one way to fix my layout alignment issue. By using two columns inside of the white box in my example, I could set the content in the left column to "left-align" and the content in the right column to "right align" (that's what my non-developer logic thought anyway).

#7

I have a screencast ready to share with the community on how to create a simple flexible grid system.

I haven't read all of the EULA (who does), @ryan @kevin is it OK to share unlisted youtube links with everyone here?

#8

Thanks for asking @David. That'd be great, please do post it!

The tl;dr on sharing information about pre-release Subform software is: you can share it freely with other testers here on the discussion board. If you want to share it elsewhere, just ask. (The answer from us will probably be yes.)

#9

I can't open a new thread, the forum software tells me I'm blocked for 19 hours.

So I post it here:

What I forgot to mention in the video: you can change the "1/" width setting of the grid column to say "3/" to get a column that stretches wider than the other columns.

#10

@David There was a rate limit set on max topics in the first day. I've increased it, so you should be able to post a new one now.

#11

@David you're video was very helpful thank you so much for making that.