Divi 5’s new grid layout system makes it easy to build responsive, editorial-style sections that align perfectly at every breakpoint. In this free pack you’ll find 8 formatted CSS grid section designs, each created for clean structure, strong hierarchy, and fast editing. Drop them into any page and swap the content.
Example
Let’s take a look at all 8 grid sections in this pack. The download is further in the post.
Subscribe to our YouTube channel
Download 8 CSS Grid Sections for Divi 5
Get all 8 grid sections for free. These are fitted sections that are designed to look great out of the box. Import them into your Divi library and add them to any page.
What’s included (9 exports)
Once you download and unzip the folder, you will find all 9 layout exports neatly organized as individual sections and a full “All Sections” package.
Prestyled-Individual Sections (8) → ready-made designs.
Prestyled – All Sections (1) → Full package of all designs.
How to use the grid designs
Keep your downloads folder nearby to import it into your Divi website.
1. Imports sections into the divi library
First we need to import the layouts into your Divi site. Go to Divi → Divi Library. Click on the Import and export Button at the top of your screen.
When the Import and export layouts Modal appears, select the Import tab and click Choose file To find the JSON files on your computer.
Choose the Prestyled – CSS Grid Sections (All) File and click it to import it.
Once the file is loaded, click Import Divi Builder Layouts to install them.
Once imported, all 8 CSS grid layouts will appear in the Divi library.
2. Add a grid section to a page
Navigate to Pages → All pages. Open a page in the visual builder (or create a new one).
Click on the Black “+” in the visual builder. When the modal of the Insert section appears, click the Add from the library Tab.
Choose the grid section you want to insert.
Click Use this section to load it.
Finally, save the page by clicking Safe Draft at the top right of the visual builder.
Adjusting the grids
These sections ship with ready-made layout, spacing, and typography styles. However, you can still customize everything at the section, row, column, or module level to better match your brand.
Divi 5’s grid controls give you precise layout control while keeping everything responsive.
1. Edit grid tracks (columns and rows)
Open the Rooster Container (row) settings. Click on the Design Tab. The expulsion of the Layout Menu to reveal the settings.
You can change the number of columns for different breakpoints – Desktop,, TabletAnd Telephone.
You can use Divi 5’s customizable responsive breakpoints or the responsive editor to change the number of columns in the grid. In this case 4 on desktop, 4 on tablet and 2 on phone.
You can also control the column and row settings and the column level. Click on one of the columns of the grid and navigate to the Design tab.
The expulsion of the Dimensions menu. Locate the Column Span field. Increase or decrease the amount of space the column should occupy horizontally.
You can also determine how many rows the Column should stretch vertically. In this example it is set to 2but you can increase or decrease the number to get the Column Behavior completely.
Moreover, you can use the Horizontal And Vertical gap in your grid to arrange the space horizontally and vertically.
2. Use automatic patterns
Enable Auto-fit where available so that cards wrap neatly at each breakpoint. This keeps rows balanced without manual reflows. While in the Rooster container (row), scroll to Schedule automatic columns and make sure Auto is selected.
It ensures that additional columns are automatically added when grid items are moved beyond the defined grid, controlling the width of those extra columns.
Now let’s define the size for additional rows that will be automatically created when grid items are moved past the set grid. Car -rows of the grid controls the height of overflow rows, similar to setting the auto value for Schedule automatic columns Ensures that additional columns are added and their widths are managed effectively.
3. Place and tension items
Individual grid items (columns) can be placed exactly where you want them. In the Layout Menu in the column Design Tab, you will find Column Start And Column end. This allows you to control the horizontal position of your item in the grid, making it flexible for custom layouts.
Column Start Choose the vertical line where your roster item starts on the left. Enter a positive number, such as 1to tune it to the left, or 2 To skip the first column and start in the second. Choosing Auto tells the grid to automatically position itself based on its natural flow, without having to specify an exact line number.
Column end Sets the vertical line where your grid item ends on the right. Like Column Startthese values can be positive or negative.
Row start And Row end Work the same way as their column counterparts, but control the vertical placement of your grid items. Row start Sets the horizontal line where the item starts at the top, allowing you to choose a starting point.
On the other hand, Row end Determines where the item stops at the bottom, allowing it to span multiple rows. Use positive numbers for precise placement or negatives for creative overlaps, and the grid dynamically adjusts as you adjust.
4. Alignment and distribution
In Divi 5’s CSS grid, you can fine-tune how your grid items are arranged. Grid direction This allows you to switch between row-based or column-based layouts, determining the primary flow of your grid items. Grid density Adjusts the spacing between grid lines so you can make your layout feel tighter or more spaced out.
Usage Target content And Align content to control the overall distribution of items across the grid. Use for more precise control Align items To adjust the alignment within each cell (column), make sure everything displays neatly across rows for a polished look.
5. Responsive switches per breakpoint
Adjust your layout’s columns, gaps, and spans at any breakpoint to ensure a polished look on devices. For example, use fewer columns and smaller holes on mobile and expand them for desktop.
Adjust font sizes with CSS units such as maximum To maintain and adjust readability maximum width on headings to avoid awkward text that packed onto smaller screens.
6. Add, duplicate, or reorder grid items
Manage your layout by adding, duplicating, or reordering grid items in Divi 5. Just copy an existing item and tweak it if necessary. Drag items to reorder them and arrange your content in the perfect order.
Delete unwanted items to keep your grid clean if something isn’t working. To ensure tidy rows, keep the number of items in line with your intended column count, preventing any awkward gaps or overflows.
7. Use design variables, presets and extend attributes
Speed up your workflow by creating design variables, presets and extends attributes. Link colors and spacing to design variables for a cohesive look that’s easy to update globally.
Save your favorite card styles as presets to quickly reuse them and keep your project consistent.
Extended attributes allow you to instantly apply a change from one card to another, saving time on bulk updates. For quick global tweaks, you can use Find and Replace to adjust colors, font sizes, or spacing across the entire grid with a single action.
Start building with CSS Grid in Divi 5
These 8 formatted grid sections are a quick way to speed up your Divi 5 builds. Download them, drop them into any page and layer them on your content. The new grid system handles the structure so you can focus on design.
#CSS #Grid #Layouts #Divi #Free #Download