Creating a simple grid layout of modules using CSS Grid
Layouts are becoming much easier thanks to the new CSS Grid and the Flexbox properties. For this tutorial we’re going to have a look at CSS Grids.
Whilst Flex (or Flexbox as some of the older members of our community like to call it) is becoming more widely used to organise our web page elements, Grid has far more potential.
Browser Support isn’t at 100% so a fall back option may be required however, being somewhat of an anarchist, (some might say lazy) we’re going to ignore those people with their inferior browser choices.
Let’s get stuck in and a create a 3x3 Grid.
For our layout, we’ll assume we want a grid of embedded YouTube videos, just to keep things relatively simple and entertaining, plus we can always fetch a coffee and play a video if we get a little bored. You can apply this to whichever modules you wish to use, or even multiple module types.
As always, if you break your website, in the words of the late great Han Solo, ‘it’s not my fault’.
To get started we’ll add a standard section with a single column then add some custom CSS to the column we just created.
Click on the Row (green) settings hamburger icon and select the Advanced Tab.
The column is going to be our grid container. We have two choices here. We can either give the section an ID or a class of say ‘grid’ or we can add our code directly to the column. For this tutorial I am going to add it to the column custom css.
Next, let’s define our Grid.
We do this by simply setting the display property to grid like this:
Now, we define our Grid Columns.
We want 3 columns in our grid. We can do this by adding three values to the grid-template-columns property. We can use either pixels, fractions or percentage units.
We are going to use the fr (fraction) unit. This will make sure our Grid Columns take up an equal amount of space in the Grid Row.
grid-template-columns: 1fr 1fr 1fr;
That’s our columns set, we’ll deal with spacing a little later but for now, let’s just get our basic Grid set-up.
Defining our Grid Rows
We want 3 rows in our Grid and we can do this by adding three values to the grid-template-rows property. However, we don’t know the height of our video modules so we’ll let our Modules dictate the height of the rows and instead of adding three Rows, we’ll ad them automatically. We can control the number of rows by the number of Module’s that we add. We only want three Rows so we need up to add 9 modules. 3 columns x 3 rows = 9.
We can add rows automatically using the grid-auto-flow property and declaring the value as ‘row’.
Adding Some Spacing to our Grid Items.
We’ll want some spacing between our modules which we can do with the grid-gap property. We can use pixels or percentage units for this. We’ll stick with pixels for this tutorial if that’s ok with you.
This will put space between our Grid items but it won’t add any space to the outside of them which is handy.
To sum up, we’ll add the following code to our Custom CSS ‘Column Main Element’ in the Row Settings.
display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-flow: row; grid-gap: 10px;
Now let’s add some video modules with some disturbing content to keep things interesting.
You can see we have a minor issue with our Grid and the spacing is bigger between the rows than it is between the columns.
This isn’t a problem with our Grid but it’s actually Divi giving our modules a bottom margin that we don’t really need.
Let’s fix that before we go any further.
The video module doesn’t have any options for padding or margin. That’s odd, because I thought it did but for some reason it doesn’t. That’s no problem because we’re only going to edit one module and then save it as a Global Item. This will make it easier to add more modules to our Grid so we’ll only need to make our custom changes once.
For those Gold Star Pupils following along, we need to remove all but one of our existing Video Modules, for those lazier students who didn’t already create them, we’ll call you our Brown Star Pupils, just create a video module when you finally get around to trying this out.
Adjust the Settings and Save as a Global Item.
Open up the setting for your video module. All we’re going to do is add margin: 0; into the Custom CSS box for the Main Element in the Advanced Settings Tab. We’ll also take the opportunity to adjust the modules other settings. Then click the ‘Save & Add To Library’ option, name the video module to something memorable such as Grid Video Module and save it as a Global Item.
Selective Sync options
Once we’ve saved our Global Module, when we open up the module again we can see we have the Selective Sync Options which are the little icons before each module setting. By default they are all green which means all of the current settings are global settings and when we load in a copy of our Grid Video Module from the library we’ll have all the same settings, including the video URL. We can toggle the selective sync options on and off simply by clicking on the icons.
For our Video module, we’ll toggle the first Add Video box to off so when we add a new Module we only have to input the URL for the Video we want to add and all the other settings will remain intact. If we ever want to alter those settings, we can just adjust one of the Module’s (on our page or in the Divi Library) to apply the same settings to all of our video modules, site wide. The power of Divi! Awesome right?
If you’re using different modules, try saving them all as Global Items.
The Final Result…
Now we’ll go ahead and create our 3 x 3 Grid using our Grid Video Modules. Just for fun, I’ll put a tilt blurb in the middle of the Grid and surround it with some of my favourite music videos especially for your enjoyment. So go get yourself a coffee, sit back, relax and enjoy the show. Then go make your own Grids.
Remember, instead of adding video modules, we’re now adding our Library Item, so click Add Module, then the Add From Library Tab, choose your Global Item and edit the appropriate fields.