1 min read
Part 15: Edit container layout for catalog page
Change the container layout to add sidebars
- Open Catalog Page we created in previous tutorials
- Select Container 1 from the Content panel on the left
- Select Layout from the Properties panel
- Change the layout to the following
- Click Edit layout code
- Update grid-template-columns property from the layout.
"grid-template-columns": "9fr 3fr"
- Update the layout to add some margin with following snippet.
"styles": { "margin": "2rem auto 4rem 2rem" },
- Click Save
- The end result should be something like this
- Check other properties of the layout as well which can be modified to fit your purpose like max-width, grid-gap, etc.
Great!! We have successfully modified the layout to fit our purpose.