Grid Element Discussion

Beta
#1

Hi everyone!

We’ve had discussions with many of you about building a new Grid element powered by the CSS grid spec. This topic is both a status update, and an invitation to discuss the progress to-date. Because of time contraints, we’ve moved forward with beta testing even though this element has not been completed.

General Considerations

  • We’re trying to build a CSS grid spec powered Element allowing you add and manage cells within that grid and use it as a basis for you page layouts.
  • CSS Grid is incredibly powerful and allows for complex layouts. We’re trying to strike the right balance of providing access to that power, while providing the most approachable user experience.
  • Nothing mentioned here is finalized. We just wanted to provide a development update on the element and get your feedback in a few areas.

Behavior

  • You can add a Grid element by dragging it in from the library. It will also be an option under the “Content Layout Element” preference which turns it into the default child of newly created sections.
  • Once a Grid is added, in the preview you will see “Choose a Grid Preset” (similar to the new Row element) along with a list of several starting points with varying degrees of complexity.
  • Choosing a preset will add the correct number of cells, and preconfigure everything to have a nice looking grid at all breakpoints.
  • You can inspect the Grid element, or the individual Cell elements and change their appearance
  • Cells are similar to the existing Column and Container elements. They support drag and drop for child elements.
  • Per the CSS spec, there are two layers to consider. First, Grids must have a “Template” (we’ll also refer to this as the “Grid tracks”) which determines the valid locations where cells can be placed. The second is the cells themselves which sit inside the template.
  • The Grid template will be customizable at every breakpoint.
  • If you stick to the included presets, you won’t need to learn the CSS grid specification.
  • If you want to make your own grids, or heavily customize the presets you will need to have an understanding of how CSS grids work.

Progress

The first screenshot shows Inspecting the Grid element we are currently working with. Notice how we have six cells, and the Column Template has three values, and the Row Template is auto. These templates are directly piped into the generated styles.

The three Column Template The 150px means the first column is always 150px. The 1fr units to follow mean the next to columns should be 1 fractional unit each - essentially it means make 2 more columns to fill the remaining space. By setting a single row to auto it tell the grid to repeat the same column arrangement over and over.

Grid1

By default all cells will flow into the next available position in the grid tracks. But by inspecting the cells you can override the cell coordinates.

Grid2

You can also change how the Cell’s DOM element is aligned to the track. For example, we could make the first cell span multiple rows and delete the 6th cell. Now we have a fixed 150px sidebar, and four variable width cells that fill the rest of the screen.

Grid3

As you can already tell, this setup allows for a great deal of power when laying out grids, but does lean a bit heavier into assuming you know how Grids work under the hood. To alleviate this, we’ve been working on UI that can be turned on as an overlay in the preview area. You would still need to setup the grid templates (handled automatically by the preset chosen initially) but you would be able to control cell placement and sizing.

Grid1

Challenges

The biggest challenge we’ve encountered, and the primary reason for excluding this element from the beta is the drag/drop interface. It is incredibly complicated to manage the underlying grid tracks, allow cells to be moved around with drag/drop while also maintaining an accurate visual preview. We’ve not ruled out the possibility, it will just take more time to get it right.

Feedback

  • How do you feel about the overall approach?
  • Do you feel like any key functionality to an element of this nature has gone unrepresented?
  • Are there any grid presets that come to mind that you feel would be useful options out of the box?
8 Likes
#4

It’s kindly similar to this https://vue-grid-generator.netlify.com/

I’ve used it to create some very specific layouts. Seems like it would be a very very nice thing right inside CS. Nice one! X Pro becomes not just a theme. It’s a great framework to build an interactive web apps! Good job!

#5

I’d love to give some feedback, but am not really familiar with CSS Grids. So, when I read through your description above, the only thing I’m left with is the question “what is this useful for?”

Because looking at the shiny new controls for rows and columns, it “seems” like it’s possible to accomplish a lot of the same things you describe above. I know I must be missing something, and there have to be important reasons why you’ve invested so much time in it.

So, other than the “2-row height left hand column” example above, perhaps a bit of a primer on what use-cases the grid makes possible might help those of us who aren’t familiar with the spec give some feedback. Or at least get excited about the possibilities…

#6

@Georgich, that is a very cool link! I’ve not seen that tool before but that will be fun to take a look at and play around with.

@devinelston, that’s a great question about CSS Grid and how it compares to Flexbox. There are certainly a lot of similar features to Flexbox in relation to how you can place items within a Grid (i.e. start, center, end, space between, et cetera), but there are some fundamental differences.

Flexbox has a one dimensional relationship with its content:

Ignore those purple sections for a bit and imagine that the six orange blocks above are Columns in our new Row Element. This would be an example of having six Columns to a row and the widths set up in such a way that they wrap. Basically, the one dimensional nature of Flexbox means that cells relate to other cells on their same line. So if you set that Row to “stretch” the Columns to have equal heights, the first three Columns would all match, and then the next set of three Columns would match to themselves. One dimensionality also means that within a line, elements can possess differing widths, such as the 2nd line with “2” being larger than the others.

Alternately, CSS Grid layouts are two dimensional:

“Cells” within a grid can relate to each others via the row and column templates defined by the Grid. In the example above, we’ve defined a Grid that is 4x3, and then we have 4 Cells that can be told to be placed wherever they want on that grid. This allows us to very easily define an overall scaffolding for layout, and then literally tell a Cell where to go.

This allows users to do some VERY cool layout concepts. A couple years ago (here comes a shameless plug) I created a very small framework that explored concepts around CSS Grid layouts:

If you go to the Overview section and click through, you will see some of the crazy things you can do with Grid such as source order independence (meaning the following cells labeled 1-5 are output in succession within the markup, but are physically placed wherever we want them to go (and can be moved around per breakpoint):

You can do very simple layouts that are output by defining a minimum and maximum range in size for your Cells. This syntax basically says, "Cells, never be smaller than 220px, but fill all available space when possible (via the 1fr unit):

You can arrange content in ways many of us couldn’t have dreamed of until now, such as this example of 12 cells laid out in a clockwise fashion around a 4x4 grid:

I used Grid recently on a design I did for a friend’s website to layout a “mosaic” that is highly responsive across viewports (notice how the content constantly shifts around as the size gets smaller):

You can use it to overlay cells across tracks easily. No more position: absolute or negative margin hacks. The v2 Card actually uses a 1x1 Grid with both faces of the Card placed into that one cell, then I just flipped the back face around. What’s awesome about that is since the v1 Card had to use position: absolute to place the back face, we had to resort to using JavaScript to measure the heights of both faces and constantly update an inline px value to the tallest height so that the card faces would match. Since the new Card uses Grid and nothing is absolute, nothing is out of the document flow, so the browser can automatically scale both faces up in parity without any JavaScript. Here’s are some really cool overlapping concepts with CSS Grid:

https://labs.jensimmons.com/2017/01-003E.html
https://labs.jensimmons.com/2017/01-018.html
https://labs.jensimmons.com/2017/01-002.html
https://labs.jensimmons.com/2017/02-001.html

All of that, and Grid also has native grid-gap properties to specify gaps, along with a TON of other stuff. The builder would allow you to take advantage of building out these “templates” in Grid, adding cells, and then the UI we’re working on is giving you a physical way to grab those cells, drag them around, put them in new tracks, resize them to go across multiple tracks, et cetera. As placing each item on a Grid can be a little laborious at times, having an actual UI to interface with would be a tremendous tool to experiment with and try all sorts of new layouts with.

I know that’s a lot to take in, but hopefully it helps to demonstrate some of the differences between CSS Grid and Flexbox and how having this additional layout Element in our builders could open up so many possibilities for your website!

10 Likes
#7

You had me at “No more negative margin hacks” :smiley: Thanks for the overview!

1 Like
#8

Top answer EVER :smile: Not joking )

2 Likes
#9

Glad to be of service, @devinelston and @Georgich! :slight_smile: And thank you both so much for your feedback and help today…it is a tremendous thing to have so many people help us look at everything with fresh eyes so we can tidy things up and make it the best we can.

As for everyone else, please don’t hesitate to let me know if you have any more questions about grid or what you’d like to see from the builder.

3 Likes
#10

I was about to write the same thing as @Georgich did. The benefits of the CSS grid over Flexbox is an important factor to win over the users.

Not only the existing user base, but also the future one, with demos on the new Themeco Website. Those cool layouts are a big selling point, and they are clearing out the abstraction of the concept of the CSS Grid. :slight_smile:

One question:

I have noticed here: https://labs.jensimmons.com/2019/01-002.html, that the right image is maintaining the focus point on the subject while resizing the browser. I see this is done with object-position: 58% 50%; Will such thing be available in the New element natively? Focus point of the image (Both Vertical and Horizontal) is an important thing for responsive layouts, yet it is usually done rarely, usually using JS.

Thanks!

1 Like
#11

So you’ll be able to do it with background images on the Grid Cell element. Those will have the background controls you’re used to which set background-size: cover similar to how the object-fit: cover; works on image elements.

For the Image element, I could see us adding an Advanced Toggle for positioning that offers more control over position and size. We’ll need to test it in some other contexts first to see if it makes sense for the element.

5 Likes
#12

Not sure if there is a hard use-case or requirement, depends on grid builder settings/flexibility I guess. Shall the grid builder allow named areas?

#13

@strobley,

We looked into it, but I don’t think we’ll be using named areas. It’s super helpful if you’re coding it by hand with CSS, but for an abstraction tool like the Grid Element it felt a bit redundant and disconnected. For example, it’s really nice to name some areas ahead of time, then tell cells to be placed in those areas by name. With a visual UI you’ll be able to see the areas in realtime and just move cells into them.

1 Like
#14

The challenge resembles the ‘merge cells’ function in Excel. It’s interesting to see what Microsoft did to figure out how to respond to a ‘merge cells’ button push when the underlying cells are or aren’t a valid mergeable shape.

As you drag and drop over a spreadsheet, they expand the selected area to become the size of the largest underlying merged block.

If you can deliver a version of this which uses some common sense constraints to make it work without bugs, I’d do so. Then iterate to add complexity. I’ll let you guys be the judge, but the goal is worthwhile.

Bill.

#15

Thanks @alexander thats pretty much what I thought, if the UI builder has the settings the use-case becomes redundant. Looking forward to getting hands on with the grid :smile:

#16

Hi @alexander and @kory

Is there a status update on this, is the drag/drop visual UI still be biggest challenge? A little concerned there is a little back pedalling on this feature on the August update. I, and I’m not sure how many others have held off doing any new work until this feature is released which was hotly slated for this release.

I totally respect you want to deliver the perfect product, however if its not fully working as you envisaged, would there be an option to still include the grid as beta functionality in the final release? I’d be open using something in-perfect to get off the ground if the limitations are clear and understood. As per @kory’s note, these kind of layouts are what I’m looking forward to creating :smile: if its beta to start I can live with it!

#17

@theotcspace Interesting parallel! Thanks for sharing that. Realistically, I think in the end we will need to make some common sense assumptions like you’re describing.

@strobley Our intention at this time is to continue working on the Grid UI once the other beta feedback is sorted out (almost there).

The only concern I’d have about shipping it in some kind of beta state is there is a high likelihood of breaking changes when the final version of the element is released. That being said, maybe it’s something we do behind a constant like define( 'TCO_BETA_FEATURES', true ); or something. Hopefully it won’t come to that and we’re successful in getting the UI sorted.

#19

Haven’t read all of this in detail, but PLEASE consider WooCommerce Product/shortcodes/implementation into this new Grid element.

Implement as much Flexbox functionality as you can as well! haha

Sounds amazing overall though!

Cheers,
Sam

1 Like
#20

’ + 1

Was going to attempt doing this myself following this release - if it could be done as part of; that would be truly awesome :smile:

#22

Wanted to post a quick update here before the weekend. The fundementals of the Grid element are in place and working, but with it being such a complicated CSS spec we’ve been taking the time to build a powerful visual editing interface that will let you easily drag to resize and move cells around the available grid positions. There’s still a fair bit of involvement. We’ve made some great progress this week on the visual editor, but there’s still a fair amount of work to be done and a few rounds of polish before it can be testing.

Monday we’ll be switching back to the beta feedback and start trying to get that all wrapped up before the official release. We plan on keeping the beta forum active because as soon as possible after this release we’ll be
uploading a version that includes the Grid element for you to play with. We’re really looking forward to your feedback when the time comes. If you’re following us on facebook you can see the update there as well: https://www.facebook.com/yourthemeco/posts/2355513714545440

Sam, the Grid itself is going to be another layout element. It will have cells that will act similar to Columns (or Containers from Pro’s Header and Footer builders). You’ll be able to put any content you want inside them.

3 Likes
#23

Another update: As you may have noticed, we’ve moved the release cycle live without the Grid present. It is still not quite to where we’d like it to be, but we don’t want to delay this valuable cycle any longer. We will be working towards finishing the Grid in a smaller cycle immediately following this update.

3 Likes
#25

Update: The Grid beta is live! Feel free to continue discussing on this thread or open your own threads with specific issues/feedback.

The beta announcement includes a link to some templates of actual designs using the Grid element: https://theme.co/apex/forum/t/pro-3-1-0-grid-element-beta/65125

1 Like