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 |
align-left |
|
text-align: center; |
horizontal center |
aalign-center |
|
text-align: right; |
horizontal right |
align-right |
Flex |
Property |
Declaration |
Class name added to .flex-row |
|
align-items: flex-start; |
vertical top |
row-top |
|
align-items: center; |
vertical middle |
row-middle |
|
align-items: flex-end; |
vertical bottom |
row-bottom |
|
justify-content: flex-start; |
horizontal left |
row-left |
|
justify-content: center; |
horizontal center |
row-center |
|
justify-content: flex-end; |
horizontal right |
row-right |
Note the borders on .inner-content are for the demo only as a visual aid.
Flex
full column
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, center the boxes
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, right align the boxes
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.
four column, align center
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, align right
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.
mixed 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.
mixed column, middle aligned
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.
mixed column, bottom aligned
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.
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 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 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.