CSS Grid in Divi

This video is a practical example of creating a Divi layout with the use of the CSS Grid system. Follow this step-by-step walkthrough to create a complex grid-based layout using the Divi Modules as grid items.

Here’s the CSS code used in the example:

.dsa-grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "image1 image2 cta1"
    "image1 cta2 image3"
    "cta3 cta3 image3";
  grid-gap:10px;
}

@media (max-width:980px) {
  .dsa-grid {
    display:block;
  }
}