Easiest Flex Grid Ever


Overlay

example

gover2


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa tellus, mollis sit amet sodales vitae, placerat dignissim mi. Pellentesque interdum lacus eget diam maximus consequat quis ut dolor. Nullam massa odio, rhoncus ac varius non, porta in arcu. Nulla tempus, mi ac facilisis cursus, leo nulla ultrices erat, vitae lobortis metus diam at nibh. Sed commodo augue eu sodales porttitor. Phasellus non malesuada purus, nec scelerisque massa. Etiam vitae aliquam augue, sed pharetra felis. Fusce sodales tellus vitae mi suscipit dignissim. Mauris ac tempor lacus, non vulputate nunc. Sed rutrum, augue et suscipit vulputate, diam felis ornare massa, et efficitur sapien nisl ac lectus. Nulla congue magna orci, a lacinia elit convallis.


lake-como

vignette

On colored background

This solution doesn't use opacity, it uses box-shadow. In this example it will fade to whatever color is specified as the text-color since a color hasn't been specified in box-shadow.


top edge

Use: faded faded-top

bottom edge

Use: faded faded-bottom

left edge

Use: faded faded-left


right edge

Use: faded faded-right

bottom and left edges

Use: faded faded-bottom faded-left

top and right edges

Use: faded faded-top faded-right


top and bottom edges

Use: faded faded-top faded-bottom

left and right edges

Use: faded faded-left faded-right

3 edges

Use: faded faded-left faded-right faded-bottom


All edges

Use: faded faded-all

Wider fade

Include faded-wide
eg. faded faded-wide faded-right

Narrower fade

Include faded-narrow
eg. faded faded-narrow faded-right