fbpx

How to Create a CSS Grid Layout for Divi Modules

By Divigrid

August 21, 2022

Creating a CSS Grid layout for Divi modules can significantly enhance your website’s design and functionality. While Divi provides a robust set of tools for building layouts, the flexibility of CSS Grid allows for even more precise and dynamic arrangements of your content. In this guide, we’ll walk you through the process of implementing CSS Grid within Divi, enabling you to achieve seamless and responsive grid layouts. Whether you’re aiming for a more sophisticated design or simply looking to streamline your content presentation, this tutorial will equip you with the techniques needed to master CSS Grid in Divi. Let’s get started and elevate your web design game to the next level.

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);
divigrid divitest Just another WordPress site 11 1

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.
divigrid divitest Just another WordPress site 8 1

Step 3: Creating a module for grid layout

Inside the column of the row, add any kind of modules from Divi builder you want. We add a blurb module for our design purpose and then update the content settings of the module as follows.
  1. Write the title and paragraph text.
  2. Background color: rgba(144,79,193,0.1)
  3. Delate image.
divigrid divitest Just another WordPress site 12

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.
divigrid divitest Just another WordPress site 13
divigrid divitest Just another WordPress site 14

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.
divigrid divitest Just another WordPress site 16
divigrid divitest Just another WordPress site 19

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;
divigrid divitest Just another WordPress site 18

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”.
divigrid divitest Just another WordPress site 21

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;
divigrid divitest Just another WordPress site 20

Responsive Tablet view 

  1. display: grid;
  2. grid-template-columns: repeat(2, 1fr);
  3. grid-template-rows: auto;
  4. grid-gap: 10px;
divigrid divitest Just another WordPress site 22

Responsive Mobile view

  1. display: grid;
  2. grid-template-columns: repeat(1, 1fr);
  3. grid-template-rows: auto;
  4. grid-gap: 10px;
divigrid divitest Just another WordPress site 24

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;
divigrid divitest Just another WordPress site 26

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;
divigrid divitest Just another WordPress site 27

 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;
divigrid divitest Just another WordPress site 28

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;
divigrid divitest Just another WordPress site 29

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;
divigrid divitest Just another WordPress site 30

Final Result

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

divigrid divitest Just another WordPress site 31 1

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.

DiviGrid, your ultimate toolkit for designing captivating websites with ease and precision. DiviGrid offers a comprehensive grid system that includes over 30 premium modules and an impressive library of 550+ design demos, empowering you to create stunning, responsive layouts effortlessly. This robust package features 10 versatile layout pages, 50 meticulously crafted header layouts, and over 50 dynamic sections, providing endless possibilities for customization. DiviGrid is not only feature-rich but also budget-friendly, making high-quality web design accessible to everyone. Additionally, it comes with a premium child theme, ensuring your website stands out with a professional and polished look. Transform your web design projects with the power and flexibility of DiviGrid.

If you want to read more about CSS grid layout from Elegant Themes website please visit Elegant Themes CSS Grid

Please let me know what you think about this and if you want to read more please visit Tips & Tricks

Divigrid

Divigrid is the perfect way to make your website stand out from the crowd. With its unique grid system, you can create a truly one-of-a-kind design that will wow your visitors.

Get 10% OFF for Subscribe Now

4 Comments

  1. Mahbub Shahin

    This is awesome.

    Reply
  2. Asit Aithal

    Excellent article.

    Reply
    • Divigrid

      Glad to hear that you liked our article. Hope this will help you to create a nice grid layouts for your website or client website.

      Reply

Submit a Comment

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

You May Also Like