A grid layout is a powerful way to organize content in your email design. It helps you present multiple pieces of information—like products, events, or articles—in a clean, structured, and visually appealing way. By arranging content in rows and columns, you make it easier for your readers to scan, compare, and engage with what matters most.

Create a grid layout in an email design

🎥 Watch the following video and follow the instructions below to learn how to create a grid layout in the drag and drop email editor:

1. Create or open an email design in the drag and drop email editor.
2. Drag and drop a content block in the canvas. Here, we will drop an Image content block.
3. Click the section containing your content block in the canvas to display its settings.
4. In the canvas, click the plus icon + next to your content block to add a column. You can add a maximum of 5 columns. Here, we want to display 3 columns.
5. Under each content block, drag and drop the other content blocks you want to add to create a grid layout and repeat the pattern. Ensure you drop your content blocks inside the same section. To learn more, check our dedicated article Differences between sections and content blocks.
6. Fill in your content blocks with the texts and images you want. 

Congratulations! 🎉 You have successfully created a grid layout in your email design. 

Insert data feed variables in a grid layout [Advanced]

To insert your data feed variables into a grid layout, you need to manually insert variables to specify the exact index of each item you want to display. This means you need to decide ahead of time which entries from your feed to show.

Part 1: Retrieve the data feed variables

To know exactly which fields to reference in your data feed, go to your Data feeds page and open the data feed you want to display. There, you can view the structure of your feed and find the correct keys to use in your variable syntax. 

The syntax to manually fetch specific items from your data feed is: {{feed.feedalias.array.index.variable}} where: feedalias is the exact alias name of your data feed, matching the spelling and case as it appears on the Data feeds page. array is the array that contains the values for each item. index is the position of the specific item you want to display from your data feed (starting from 0 for the first item). variable is the specific variable or field name you want to display, e.g. name, price, date.

For example, to display the name of the yoga class in the array following_classes, in the first index, your data feed variable would be: 

{{feed.yoga_classes.following_classes.0.class_name}}

Part 2: Create and fill your grid layout with data feeds

1. Create an email design with a grid layout. To learn more about how to create a grid layout, check our dedicated section above Create a grid layout in an email design.
2. Fill in your content blocks with data feed variables using the syntax from Part 1: Retrieve the data feed variables. To learn how to insert variables in your content blocks, open the accordion corresponding to the content block you want to fill in:
   🔠 Add a variable as text

   Add a variable inside a content block containing text to display specific details related to an item, such as a name, location, or date.

   1. Click a content block containing text (Title, Text, or Button blocks).
   2. Place your cursor where you want to add a variable.
   3. Enter the data feed variable corresponding to the text you want to display. For example, with our sample data feed, to display the name of the yoga class of the first element in the data feed, the variable would be: {{feed.yoga_classes.following_classes.0.class_name}}.
      
   4. Repeat the steps for each variable you want to add as text. Replace each time the index corresponding to the element of your data feed you want to display.

   🖼️ Add a variable to an image

   Add a variable to an Image block to display the image associated with an item, such as an event picture.

   1. Click an Image block.
   2. From the sidebar, go to Image settings.
   3. In the Insert image from URL field, enter the data feed variable corresponding to the image you want to display. In our example, to display the image of the first element in the data feed, the variable would be: {{feed.yoga_classes.following_classes.0.imageurl}}.
      
      
   4. Repeat the steps for each variable you want to add to an image. Replace each time the index corresponding to the element of your data feed you want to display.

   🔗 Add a variable as an hyperlink on a text

   Add a variable as a hyperlink on text to direct recipients to the URL associated with an item, such as a register form or event schedule page.

   1. Click a content block containing text (Title or Text blocks).
   2. Highlight the text where you want to add the link.
   3. Click the Add link 🔗 icon in the formatting bar.
   4. In the Link target field, enter the data feed variable corresponding to the URL you want to display. In our example, to display the URL of the yoga class booking page for the first element in the data feed, the variable would be: {{feed.yoga_classes.following_classes.0.url}}.
      
      
   5. Repeat the steps for each variable you want to add as a hyperlink on a text. Replace each time the index corresponding to the element of your data feed you want to display.

   🔗 Add a variable as a hyperlink on an image

   Add a variable as a hyperlink on an image to direct recipients to the URL associated with an item, such as an event page.

   1. Click an Image block.
   2. From the sidebar, go to Link settings.
   3. In the Link target field, enter the data feed variable corresponding to the URL you want to display. In our example, to display the URL of the yoga class booking page for the first element in the data feed, the variable would be: {{feed.yoga_classes.following_classes.0.url}}.
      
      
   4. Repeat the steps for each variable you want to add as a hyperlink on an image. Replace each time the index corresponding to the element of your data feed you want to display.

   🔗 Add a variable as a hyperlink on a button

   Add a variable as a hyperlink on a button to direct recipients to the URL associated with an item, such as a product page.

   1. Click a Button block.
   2. From the sidebar, go to Link settings.
   3. In the Link target field, enter the data feed variable corresponding to the URL you want to display. In our example, to display the URL of the yoga class booking page for the first element in the data feed, the variable would be: {{feed.yoga_classes.following_classes.0.url}}.
      
      
   4. Repeat the steps for each variable you want to add as a hyperlink on a button. Replace each time the index corresponding to the element of your data feed you want to display.
3. Preview and test your email to ensure your data feed variables display correctly. 

Congratulations! 🎉 You have successfully created a grid layout containing data feed variables. 

Email template	Email in recipients' inboxes

⏭️ What's next? 

• Personalize your email content with real-time data (data feed)
• Personalize your email subject line and preview text with real-time data (data feed)

🤔 Have a question?

If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.

If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo Agency partner.