Add a Grid Container to a Website Page

Want more control over how you arrange and space content on your website? With Grid Containers, you can design pages with built-in structure.

Grid Containers is an exciting new feature available in your Commentsold Site Creator. With Grid Containers, you can create engaging content and collections pages that feature eye-catching structure and natural flow.

Grid Containers lets you take advantage of the content widgets you know and love–content sections, product grids, featured collections, and more–and lets you play with the horizontal layout. Want an image or text to the right of a featured collection? No problem. What about a product grid with a background image? Totally possible!

Now, what about that text to the right of the collection with a patterned background for some personality? Totally possible.

With Grid Containers, you can let your imagination go wild and design the website of your dreams.

Let’s walk through the feature below.

Grid Container Layout Options

Site Creator offers 7 unique grid containers. These containers contain sections of varying size. The type of grid layout you select will dictate which content widgets are available to use in each section. For example, a 25/25/25/25 grid layout would be limited to content sections (images and text) and heading blocks as each space wouldn’t be large enough to fit a product grid or featured collection.

Full-Width Layout
	A single section that spans the full width of the page. This section can hold any content widget.
50/50 Layout
	Two equal sections that together span the full width of the page. These sections can hold the following content widgets: Image with Text, Content Section, Featured Collection, Product Grid, Slideshow, Live Replays, and Heading Block.
33/33/33 Layout
	Three equal sections that together span the full width of the page. These sections can hold the following content widgets: Content Section, Featured Collection, Product Grid, Live Replays, and Heading Block.
25/25/25/25 Layout
	Four equal sections that together span the full width of the page. These sections can hold the following content widgets: Content Section and Heading Block.
75/25 Layout
	Two sections with the left section taking up 75% of the page while the right takes 25%. The left section can hold the following content widgets: Image with Text, Content Section, Featured Collection, Product Grid, Slideshow, Live Replays, and Heading Block. The right section can hold the following content widgets: Content Section and Heading Block.
25/75 Layout
	Two sections with the left section taking up 25% of the page while the right takes 75%. The left section can hold the following content widgets: Content Section and Heading Block. The right section can hold the following content widgets: Image with Text, Content Section, Featured Collection, Product Grid, Slideshow, Live Replays, and Heading Block.
20/60/20 Layout
	Two sections with the left section taking up 25% of the page while the right takes 75%. The left section can hold the following content widgets: Content Section and Heading Block. The right section can hold the following content widgets: Image with Text, Content Section, Featured Collection, Product Grid, Slideshow, Live Replays, and Heading Block.

Step 1: Add a Grid Container Widget

Your first step is to add a grid container to your page. Navigate to a page where you wish to add a grid container and follow the steps outlined below.

1. Select + Add Section at the bottom of the Site Creator side menu.
2. Select Grid Container.
3. You will see the widget now listed as an element on the page. Select the pencil icon to the far right of the Grid Container row.
4. Choose your desired grid container layout from the options listed. Refer to the Grid Container Layout Options section for more information on each option.
5. Select Add Content at the bottom of the Site Creator side menu.

Now that you’ve added the grid container, you can proceed with adding content to each section.

Step 2: Add Content to a Grid Container Section

Once you have added a grid container to a page, you can add content widgets to each section. The layout you choose will dictate which content widgets you can add. Refer to the Grid Container Layout Options section for more information.

1. Select the grid section where you wish to add a content widget.
2. Select the content widget from the options listed, then select Add Section.
3. A pencil icon will appear in the section. Select the section again to edit the widget. For example, to add an image and/or text to a Content Section widget.
4. Repeat Steps 1-3 for each remaining section.

The page you’re building will refresh with each edit or adjustment you make. For example, if you change how many columns of products appear in a product grid, the page will refresh to show your desired view.

Changes with automatically save to Site Creator. To publish your content, select Publish in the top right corner of the page. If you wish to add additional visual elements to the container, then select the Back arrow in the top-left corner of the Site Creator.

Step 3: Edit Visual Elements of a Grid Container

You can adjust and apply visual changes to the grid container, including the spacing between the different sections and the background color or image.

From the Edit Grid Container side menu, expand or scroll to the Visual Layout section.

• Padding. Adjust the space between the content widget and the border of the specific grid section. Adjusting padding is helpful when aligning images between multiple sections. Toggle the More toggle to access additional padding options.
• Margins. Adjusting the margin surrounding a section tells the browser how much space should be left between a grid container and the external margin of the page. Margins are useful when keeping different containers or widgets an equal distance apart. Toggle the More toggle to access additional margin options.
• Column Spacing. Adjust the spacing between each section within a grid container. 
• Background. Choose to leave the background of a container empty (none) or choose a color or image.
  • Color. Use the color picker or Hex Code field to define your color of choice.
  • Image. Upload an image using the field provided. You can then use the Image Alignment and Image Size fields to specify how the image appears. If you wish for the image to take up the entire background of the container, select Cover from the Image Size drop-down.

Rename a Grid Container

If you have several grid containers on a page, you can rename each container to reflect the type of content contained therein.

1. Select the pencil icon on the far right of the grid container row.
2. Select the pencil icon to the right of the Grid Container title.
3. In the pop-up, enter your desired name in the Section Name field, then select Save.