Using Elements I am struggling to find a way to select individual columns in grid to resize each. When I add the grid to the page it shows as a single column even when the base 4 column setting is in place. I would like to be able to make each column a specific size. If I choose to have 5 columns in the grid I would to be able to set the 1fr value.
After you have dragged the grid on to the page you won’t see the columns until you drag some content into the grid. Drag and drop a CONTAINER into the grid and it will be shown at whatever number of columns you have set. Then when you drag the next container into the grid an insertion point will be displayed to the right or left of the first container you dragged in. Drop the container and there will now be two columns. Keep repeating for the number of columns you have setup.
When you drag these containers into the grid you can change their type to GRID ITEM, which will then allow you to control their width. For a 4 column grid I set the grid to 4 columns and each grid item to 1. Or alternatively you can set the grid to 12 and each column to 3, which is essentially the same thing. I find it easier to use the first approach.
Grids can be very confusing to say the least.
NOTE: if you are doing a mobile-first design and you start with the smallest breakpoint. You will need to start with a different setting for the number of columns. You would start out with a SINGLE column. Then as you work through your different breakpoints you will get to a width where you want to have the columns side by side. You will then have to override the number of columns to your desired number of 4. Now all of the columns will be side by side.
Thank You for your wonderful support!
@handshaper that’s a great explanation, I think we’ll “borrow” that to get started with the Grid page in the manual, if that’s okay?
Not a problem, as long as it was accurate.