Attention all web designers and Divi enthusiasts! Have you ever wondered how to create a stunning five-column layout using CSS Grid in Divi? Look no further! Our team has put together a comprehensive tutorial that will guide you step-by-step through the process.

Not only have we provided a complete grid layout for your convenience, but we’ve also included Divi’s built-in design options to make the process even easier. By following our guidelines, you’ll be able to effortlessly create a beautiful grid layout using Divi Builder.

Are you ready to elevate your web design game? Let’s dive in and discover the endless possibilities of CSS Grid with Divi!

Here is a Full Video

Step 1: Add a Section

To start, first, add a section and then update the content settings of the section as follows:

1. Background pattern: Cubes.
2. Gradient color:
3. Gradient first color ( 0% ): rgba(89,17,119,0.95);
4. Gradient middle color (50%): rgba(148,69,142,0.92);
5. Gradient last color (100%): rgba(89,17,119,0.95);

Step 2: Adding Modules to a Divi Column

After designing, then create a new one-column row to the default regular section in the Divi Builder.

1. Write the title and paragraph text.
2. Background color: rgba(144,79,193,0.1)
3. Delate image.

then update the design settings as follows:

1. Change the heading tag to H4.
2. Title font: Roboto slab.
3. Title font-weight: Semi Bold.
4. Text alignment: Left.
5. Text color: #ffffff.
6. Title line-height: 1.3em.
7. Body font: Nunito.
8. Body text color: #ffffff.
9. Body line-height: 1.8em.
10. Padding-bottom: 20px.
11. Title font-size: 26px.
12. Body text font-size: 16px.

Step 4: Duplicate the modules

Duplicate the module 9 times and then update the modules as follows.

1. Rewrite title.
2. Remove body text
3. Add icon ( Choose the icon you like )
4. Update background color.
5. Title text-align: Center.

Step 5: Creating CSS Grid Layout

Now that our modules are in place, we are ready to create our CSS Grid for those modules.
After creating modules and then we need to start designing the Row. Under the Row Settings tab, define the background color, gutter, width, and max-width. Also, in the Content tab change the background color, border radius, and box shadow.

Background:

background gradient color:

1. First color: rgba(106,36,177,0.7);
2. Second color: rgba(152,82,193,0.7);
3. gradient type: Linear;

Sizing

1. gutter: 1;
2. width: 80%;
3. max-width: 1200px;

spacing:

1. padding-top: 50px;
2. padding-bottom: 50px;
3. padding-left: 50px;
4. padding-right: 50px;

Box-shadow

1. box-shadow: 0px 2px 18px 0px;
2. shadow color: rgb(255 255 255 / 40%);

Step 6. Adding Custom Code to create a grid layout

This is the most important step to create a custom grid layout. Now we are going to add custom code by using the CSS grid property.

Under Row Settings, go to the child item named “column”.

Open the column settings and under the advanced tab, enter the following four lines of custom CSS code in the main element field of custom CSS

This code will create a five-column grid with equal widths and 10px of space between each column.

1. display: grid;
2. grid-template-columns: repeat(5, 1fr);
3. grid-template-rows: auto;
4. grid-gap: 10px;

Responsive Tablet view 

1. display: grid;
2. grid-template-columns: repeat(2, 1fr);
3. grid-template-rows: auto;
4. grid-gap: 10px;

Responsive Mobile view

1. display: grid;
2. grid-template-columns: repeat(1, 1fr);
3. grid-template-rows: auto;
4. grid-gap: 10px;

Step 7: Making Changes to the Grid Modules

Now, You need to write custom code in each module separately to create the design layout you want. For your ease of understanding, Don’t worry Divigrid lovers, we have given the code with the image of how to write custom code to design.

To change the position of a module (or grid item) in the CSS grid, we can specify where we want to place a particular module in the grid. Since grid items work by enumerating grid lines, we can determine the position of grid items by using grid column start, grid column end, grid row start, and grid row end.

For where each of your columns will start and end, write the grid-column-starts and grid-column-ends CSS in the main element field of the module’s custom code.
Similarly, rows will also need grid-row-starts and grid-row-ends.

Custom CSS for First module (Unleashing Inovation):

Open the settings for the first module ( Unleashing Inovation ) and write the following custom CSS to the main element:

1. grid-column-start: 1;
2. grid-column-end: 3;
3. grid-row-start: 1;
4. grid-row-end: 3;

Custom CSS for Second module(Apps):

Open the settings for the Second module ( Apps ) and write the following custom CSS to the main element:

1. grid-row-start: auto;
2. grid-row-end: auto;
3. grid-column-start: auto;
4. grid-column-end: auto;

Custom CSS for 3rd module(Safe):

Again, open the settings for the Third module ( Safe ) and write the following custom CSS to the main element:

1. grid-row-start: auto;
2. grid-row-end: auto;
3. grid-column-start: 4;
4. grid-column-end: 6;

 Custom CSS for 4th module (Tech):

1. grid-column-start: 3;
2. grid-column-end: 5;
3. grid-row-start: auto;
4. grid-row-end: auto;

Custom CSS for the 7th module ( Miner ):

1. grid-row-start: auto;
2. grid-row-end: auto;
3. grid-column-start: 2;
4. grid-column-end: 4;

The rest of the modules(5th,6th, 8th, and 9th)  use the same CSS

1. grid-row-start: auto;
2. grid-row-end: auto;
3. grid-column-start: auto;
4. grid-column-end: auto;

Final Result

Here is the final result of our custom grid CSS grid layout.

In this tutorial, we showed how to create a CSS grid layout by the Divi modules. But it is a little bit complicated because of writing custom CSS code.

If you want to create a CSS grid layout very easily without writing a single piece of custom CSS code, then you can use our very own Divigrid module.

Please let me know what you think about this.