Akash Rajput Technology over a cup of coffee

Part 15: Edit container layout for catalog page

23 sec read

Featured Video Play Icon

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.

Akash Rajput Technology over a cup of coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

Never miss a story from me, get updates directly in your inbox.
Loading