I’ve had trouble creating bento grids in my website projects but finally came across a tutorial by Jeffrey at Lytbox, introducing his way of building a bento grid in Elementor using a grid layout.

Start by setting the properties of the parent container: set the grid column to 12 fr (fractional units) and the grid row to 1 for simplicity. (Use grid-template-columns and grid-template-rows.)

For the child containers (cards): to change the size of each card (div), you can adjust its column span to 3, 6, or another number relative to the number of columns the card will take up within that 12-column layout. (Use grid-column and grid-row.)

Note: Ensure that in each row containing the cards, the total number of columns adds up to 12 (or the number you set in the grid column property of the parent container).

You can read further about CSS Grid in this detailed blog post by CSS-Tricks: https://css-tricks.com/snippets/css/complete-guide-grid/.

To make the design responsive, adjust the number of grid columns in the parent container (for example: 12 columns on desktop, 2 on tablet, and 1 on mobile) and change the grid column span for each child container as well.

Resource for 3D Graphics:

Jeffrey also recommended a great website in his video called Formia https://formia.so/, where you can upload your SVG icons, and it converts them into 3D elements. You can choose different styles and download the 3D elements in PNG format.

I’m looking forward to building the bento grid again and using 3D elements in my projects.

Be sure to check out Jeffrey at Lytbox’s YouTube channel, where he’s making great videos about web design and web development: https://www.youtube.com/@Lytbox_Academy.