Bento Card 1

grid-area: 1 / 1 / 3 / 2;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh viverra non semper suscipit posuere a pede.

Bento Card 2

grid-area: 1 / 2 / 2 / 4;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh viverra non semper suscipit posuere a pede.

Bento Card 3

grid-area: 2 / 2 / 3 / 3;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh viverra non semper suscipit posuere a pede.

Bento Card 4

grid-area: 2 / 3 / 3 / 4;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh viverra non semper suscipit posuere a pede.

Bento Card 5

grid-area: 3 / 1 / 4 / 3;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh viverra non semper suscipit posuere a pede.

Bento Card 6

grid-area: 3 / 1 / 4 / 3;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh viverra non semper suscipit posuere a pede.

Grid Area Info

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

This property is a shorthand for the following CSS properties

  • grid-row-start

  • grid-column-start

  • grid-row-end

  • grid-column-end

Slide #1

Some text for the slider

Slide #2

Some text for the slider

Slide #3

Some text for the slider