Global grid and flex items

All of the below have padding and borders added by inline css for demo purposes only.

Grid content can have padding or borders added and the widths will be consistent.

Flex content can have padding or borders added to children divs and the widths will be consistent.

Grid Property Declaration Class name
added to .column
align-items: start; vertical top column-top
align-items: center; vertical middle column-middle
align-items: end; vertical bottom column-bottom
text-align: left; horizontal left left
text-align: center; horizontal center center
text-align: right; horizontal right right
Flex Property Declaration Class name
added to .column
align-items: flex-start; vertical top column-top
align-items: center; vertical middle column-middle
align-items: flex-end; vertical bottom column-bottom
justify-content: flex-start; horizontal left column-left
justify-content: center; horizontal center column-center
justify-content: flex-end; horizontal right column-right

Grid

full column

internal div Zombie ipsum reversus

two column

Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

three column

Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

three column, six items

Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

Two column, 66 33

Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

Two column, 33 66

Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

four column

internal div Zombie ipsum reversus
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

five column with internal divs

Zombie ipsum reversus
Zombie ipsum reversus ab viral inferno
Zombie ipsum reversus ab viral inferno, nam rick grimes
internal div Zombie ipsum reversus
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

60/40 column

Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

40/60 column

Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

Flex

full column

Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

two column

Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

three column

Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

three column with six items

Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

four column

Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

five column

Zombie ipsum reversus
Zombie ipsum reversus ab viral inferno
Zombie ipsum reversus ab viral inferno, nam rick grimes
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

60/40 column

Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

40/60 column

Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.
Shields up. I recommend we transfer power to phasers and arm the photon torpedoes. Something strange on the detector circuit.

Success isn’t a list of flashy logos. It’s about helping anyone who wants to lead a great organization. If that’s you, join our list of clients – you’re in good company:

A Dose of Strategy.

Actionable tips, case studies, best practices in your inbox every other week.