3x3 Grid

admin

These grids will work in PowerPoint or any authoring tool for which the screen size is 1024×768. Simply place the grid in a Master Slide and use for the background or over a background. When your layout is complete, delete the grid from the master.

How to Use:
Insert the grid as a picture into a PowerPoint master. Position the grid in the upper left of the slide. If it doesn’t fit correctly, hold the Shift key while dragging the grid diagonally to the bottom right corner.

Three by Three (3x3) Square Collage Template for a three by three (3x3) collage. Add your own photos and videos to make a square collage for Instagram or social media. If the last digit of the serial number is odd, enter the combination onto the large 3x3 keypad, but toggle the stage of each button. Example: If the grid in the top-left has every square except the middle one on, only turn the middle one on for the actual input. Make sure you have the proper input on the keypad by the time the timer runs out. I created this video with the YouTube Video Editor (https://www.youtube.com/editor). 3x3 Grid: Three columns and three rows with a title area create nine equal sections below the title. 4x3 Grid: Four columns and three rows create twelve equal sections. 4x3 Grid with Title: Four columns and three rows with a title area create twelve equal sections below the title. 4x4 Grid: Four columns and four rows create sixteen equal sections.

Download Instructions:
Right-click on underlined link and select Save Link As (Firefox) or Save Target As (IE).

GRAPH FORMAT
DESCRIPTION
[Download not found]Three columns and three rows create nine equal sections.
3x3 GridThree columns and three rows with a title area create nine equal sections below the title.
4x3 GridFour columns and three rows create twelve equal sections.
4x3 Grid with TitleFour columns and three rows with a title area create twelve equal sections below the title.
4x4 GridFour columns and four rows create sixteen equal sections.
5x4 GridFive columns and four rows create twenty equal sections.
All Grids Zipped TogetherAll grids zipped together. (This downloads differently than the others. Just click on the underlined link and save the zip file.)

Find success with online learning. Get The eLearning Coach delivered to your Inbox once a month, with articles, tips and resources. Sign up below. You’ll get an email with a link. Open the email and click the link to confirm your sign up. Your email address will never be shared.

Here we create a basic 3x3 grid with a small gutter between the grid tracks.

We'll create a basic grid that looks like this:

Here's the code:

3x3 Grid
Microsoft teams 3x3 grid

Let's take a closer look at that code.

The HTML markup for the grid looks like this:

3x3 Grid Puzzle

So this is just a normal snippet of HTML consisting of elements nested inside an outer element. But for our purposes, the outer div is the grid container. All elements nested within it are grid items.

But it's not a grid until we apply some CSS to it.

So here's the CSS code that creates the grid:

This rule applies to the outer div (because it's been assigned the #grid ID).

3x3 grid image

Here's an explanation of each declaration within that rule:

display: grid

3x3 Grid Css

Turns the element into a grid container. This is all that's required in order to create a grid. We now have a grid container and grid items. The grid value generates a block-level grid container box. You can also use display: inline-grid to create an inline-level grid container box, or display: subgrid to create a subgrid (this value is designed to be used on grid items themselves).
grid-template-rows: 1fr 1fr 1fr
Explicitly sets the rows of the grid. Each value represents the size of the row. In this case all values are 1fr (which means it takes up the available free space), but they could just as easily have been done using a different unit, such as 100px, 7em, 30%, etc. You can also provide line names along with the track sizes (i.e. row and column sizes). See grid-template-rows for more information.
grid-template-columns: 1fr 1fr 1fr
Same as above except it defines the columns of the grid. See grid-template-columns for more information.
3x3 Grid
grid-gap: 2vw

Sets the gutter. The gutter is the gap in between the grid items. Here, we use the vwlength unit (this is relative to the viewport's width), but we could just as easily have used 10px, 1em, etc.

The grid-gap property is actually a shorthand property for the grid-row-gap and grid-column-gap properties. See grid-gap for more information.

The other part of the code simply applies various styles to the grid items:

The repeat() Function

You can use the repeat() function to repeat a track definition for a specified number of times.

For example, instead of doing this:

You can do this:

Grid

This can reduce the amount of code you need to write, especially if you're working with a large and repetitive grid.