Grid 3 Columns Examples

Coding Guidelines for Classes

Number of Columns

Specify the number of columns for each screen size

  • grid-cols-?-tiny
  • grid-cols-?-xs
  • grid-cols-?-sm
  • grid-cols-?-md
  • grid-cols-?-lg

Center Last Row

If desired, use the centered class in lieu of the standard column class

  • grid-cols-?-centered-tiny
  • grid-cols-?-centered-xs
  • grid-cols-?-centered-sm
  • grid-cols-?-centered-md
  • grid-cols-?-centered-lg

Column / Row Gap

Add the desired row and column gap

  • grid-col-gap-20
  • grid-col-gap-30
  • grid-col-gap-40
  • grid-row-gap-20
  • grid-row-gap-30
  • grid-row-gap-40

Vertical Dividers

Match the previously set number of columns to the divider class for the same screen size

  • grid-cols-?-divider-tiny
  • grid-cols-?-divider-xs
  • grid-cols-?-divider-sm
  • grid-cols-?-divider-md
  • grid-cols-?-divider-lg

Evenheight

  • Use the grid-evenheight to activate evenheight.
  • Use the grid-evenheight-align-bottom to align the bottom element (usually a CTA link or button). This must be used with grid-evenheight

Standard, One Item

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-sm grid-cols-3-md grid-cols-3-lg grid-col-gap-20 grid-row-gap-20
1

Centered, One Item

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-centered-sm grid-cols-3-centered-md grid-cols-3-centered-lg grid-col-gap-20 grid-row-gap-20
1

Standard, Two Items

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-sm grid-cols-3-md grid-cols-3-lg grid-col-gap-20 grid-row-gap-20
1
2

Centered, Two Items

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-centered-sm grid-cols-3-centered-md grid-cols-3-centered-lg grid-col-gap-20 grid-row-gap-20
1
2

Standard, Three Items

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-sm grid-cols-3-md grid-cols-3-lg grid-col-gap-20 grid-row-gap-20
1
2
3

Centered, Three Items

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-centered-sm grid-cols-3-centered-md grid-cols-3-centered-lg grid-col-gap-20 grid-row-gap-20
1
2
3

Standard, Four Items

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-sm grid-cols-3-md grid-cols-3-lg grid-col-gap-20 grid-row-gap-20
1
2
3
4

Centered, Four Items

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-centered-sm grid-cols-3-centered-md grid-cols-3-centered-lg grid-col-gap-20 grid-row-gap-20
1
2
3
4

Standard, Five Items

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-sm grid-cols-3-md grid-cols-3-lg grid-col-gap-20 grid-row-gap-20
1
2
3
4
5

Centered, Five Items

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-centered-sm grid-cols-3-centered-md grid-cols-3-centered-lg grid-col-gap-20 grid-row-gap-20
1
2
3
4
5

Standard, Five Items

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-sm grid-cols-3-md grid-cols-3-lg grid-col-gap-20 grid-row-gap-20
1

You have the bridge, Number One.

2

Always two there are, no more, no less: A master and an apprentice.

3

Three books? Wait a minute. Hold it. Nobody said anything about three books! Like, what am I supposed to do: take one book, all books, or what?

4

Your leechcraft would have had me crawling on all fours like a beast!

5

Ladies and gentlemen, last shuttle leaving for the dock...leaves in approximately five minutes.

Centered, Five Items

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-centered-sm grid-cols-3-centered-md grid-cols-3-centered-lg grid-col-gap-20 grid-row-gap-20
1

You have the bridge, Number One.

2

Always two there are, no more, no less: A master and an apprentice.

3

Three books? Wait a minute. Hold it. Nobody said anything about three books! Like, what am I supposed to do: take one book, all books, or what?

4

Your leechcraft would have had me crawling on all fours like a beast!

5

Ladies and gentlemen, last shuttle leaving for the dock...leaves in approximately five minutes.

Standard, Evenheight, Five Items

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-sm grid-cols-3-md grid-cols-3-lg grid-col-gap-20 grid-row-gap-20 grid-evenheight
1

You have the bridge, Number One.

2

Always two there are, no more, no less: A master and an apprentice.

3

Three books? Wait a minute. Hold it. Nobody said anything about three books! Like, what am I supposed to do: take one book, all books, or what?

4

Your leechcraft would have had me crawling on all fours like a beast!

5

Ladies and gentlemen, last shuttle leaving for the dock...leaves in approximately five minutes.

Centered, Evenheight, Five Items

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-centered-sm grid-cols-3-centered-md grid-cols-3-centered-lg grid-col-gap-20 grid-row-gap-20 grid-evenheight
1

You have the bridge, Number One.

2

Always two there are, no more, no less: A master and an apprentice.

3

Three books? Wait a minute. Hold it. Nobody said anything about three books! Like, what am I supposed to do: take one book, all books, or what?

4

Your leechcraft would have had me crawling on all fours like a beast!

5

Ladies and gentlemen, last shuttle leaving for the dock...leaves in approximately five minutes.

Card, Standard - Gap 40, Evenheight, Five Items with Dividers

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-sm grid-cols-3-md grid-cols-3-lg grid-col-gap-40 grid-row-gap-40 grid-cols-2-divider-sm grid-cols-3-divider-md grid-cols-3-divider-lg grid-evenheight grid-evenheight-align-bottom
Image

Title 1

There are no coincidences, Delia--only the illusion of coincidence. I have another rose, and this one is for you.

Image

Title 2

And I think that's what my running was all about. I had run for three years, two months, fourteen days, and sixteen hours.

Image

Title 3

Even if you somehow got inside, those are agents holding him: Three of them.

Image

Title 4

As of now, it stands at four minutes to midnight.

Image

Title 5

Okay, that's it for the day then. Um, don't forget: Michaelson, chapters four and five for next time.

Card, Centered - Gap 40, Evenheight, Five Items with Dividers

grid-cols-1-tiny grid-cols-1-xs grid-cols-2-centered-sm grid-cols-3-centered-md grid-cols-3-centered-lg grid-col-gap-40 grid-row-gap-40 grid-cols-2-divider-sm grid-cols-3-divider-md grid-cols-3-divider-lg grid-evenheight grid-evenheight-align-bottom
Image

Title 1

There are no coincidences, Delia--only the illusion of coincidence. I have another rose, and this one is for you.

Image

Title 2

And I think that's what my running was all about. I had run for three years, two months, fourteen days, and sixteen hours.

Image

Title 3

Even if you somehow got inside, those are agents holding him: Three of them.

Image

Title 4

As of now, it stands at four minutes to midnight.

Image

Title 5

Okay, that's it for the day then. Um, don't forget: Michaelson, chapters four and five for next time.