What problem does this address?
Following on from #44557, #32443.
What should a Grid layout type look like? What options should it provide?
What is your proposed solution?
Let's assume the limitations of the CSS Grid spec as our boundaries, to make things as simple as possible.
In order to build a grid with more than one column, either grid-template-columns or grid-template-areas has to be defined. grid-template-columns offers more flexibility in terms of responsive behaviour, so let's consider only that option for now. There are essentially two approaches to building a multi-column grid:
- Define a fixed number of columns, which can each have different (relative or fixed) widths;
- Define a (relative or fixed) column width and let grid decide the number of columns based on viewport width.
Option 1 will always display the same number of columns, although if their width is a percentage or fraction of the whole, it will behave responsively. Otherwise horizontal scroll will happen once the grid is wider than the viewport. This requires, at a minimum, setting a number of columns and their respective widths.
Option 2 will adjust the number of columns according to the size of the viewport, but the columns will all have the same width. This is an easier option to set up as it only requires specifying a minimum column width.
Perhaps we could make both options available, defaulting to 2 as the easiest to get started with? What might a UI for these options look like?
In addition to these options, we should allow gap to be set (using the existing block spacing controls) and perhaps optionally row height (although that could be left out of a V1). We could also repurpose the flex justification and alignment controls to some extent.
Cc @WordPress/gutenberg-design for ideas!
What problem does this address?
Following on from #44557, #32443.
What should a Grid layout type look like? What options should it provide?
What is your proposed solution?
Let's assume the limitations of the CSS Grid spec as our boundaries, to make things as simple as possible.
In order to build a grid with more than one column, either
grid-template-columnsorgrid-template-areashas to be defined.grid-template-columnsoffers more flexibility in terms of responsive behaviour, so let's consider only that option for now. There are essentially two approaches to building a multi-column grid:Option 1 will always display the same number of columns, although if their width is a percentage or fraction of the whole, it will behave responsively. Otherwise horizontal scroll will happen once the grid is wider than the viewport. This requires, at a minimum, setting a number of columns and their respective widths.
Option 2 will adjust the number of columns according to the size of the viewport, but the columns will all have the same width. This is an easier option to set up as it only requires specifying a minimum column width.
Perhaps we could make both options available, defaulting to 2 as the easiest to get started with? What might a UI for these options look like?
In addition to these options, we should allow gap to be set (using the existing block spacing controls) and perhaps optionally row height (although that could be left out of a V1). We could also repurpose the flex justification and alignment controls to some extent.
Cc @WordPress/gutenberg-design for ideas!