--- title: "How to create and edit the Media Grid section" description: "Learn how to create and customize a media grid section in LandingRabbit with Grid, Mosaic, Carousel and Expand layouts, tile links and hover effects." url: "https://landingrabbit.com/documentation/create-media-grid-section" lang: "en" --- # How to create and edit the Media Grid section A media grid shows your photos and videos as a wall of tiles, for example case studies or any other visual work. [Video: Custom section image](https://d2txn9w4uujjus.cloudfront.net/videos/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/e6375b12-a928-47e0-bf5c-664ed6afd0ff-c.mp4) ## Choose a layout There are four layouts: Grid, Mosaic, Carousel and Expand. To switch, click **Layout options** or **Edit styles** on the section and pick one of the four. ![Edit styles and choose the Media Grid layout option](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/dc00d5144da6f8bb09cc2df756c29871658ad3f3--960w.webp) ### Grid The Grid layout shows images and videos in the same ratio. You can ask LandingRabbit to change the ratio from 4:5 to, for example, square. ![A grid layout example in the media grid section](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/f8e636555991aa55844ab699c743ee6d6118d47d--960w.webp) ### Mosaic The Mosaic layout shows images and videos in different sizes and ratios. ![A mosaic layout example in the media grid section](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/73a29c5c913b50cf7dc3b2b23335c20921350532--960w.webp) ### Carousel The Carousel layout lets visitors scroll through the images sideways. ![A carousel layout example in the media grid section](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/e6d3ac35646a13a2742cd2491d7bf1086d71dfe3--960w.webp) You can also set the Carousel layout to auto-scroll images every few seconds. ![Set up auto-scroll for the Carousel layout](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/7b0a0b30747288f28a0ece82de71ce1ef9092cb0--960w.webp) ### Expand The Expand layout shows tall strips side by side, and a strip opens wider when a visitor hovers over it or clicks it. ![An expand layout example in the media grid section](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/7232b91aab2a1456aca57b47879ea927c8dd1aac--960w.webp) You can also set the Expand layout to autoloop every few seconds. ![Set up autoloop for the Expand layout in the media grid](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/b0fbca6499e4f1600a0cee6ea4f4db2878058f58--960w.webp) ## Show text on hover or all the time By default, a tile's text and buttons only show when you hover over it. ![Media grid showing text on top of the image or video on hover](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/887a930f213e46e36f717694c279a2fbd1ba8175--960w.webp) To show them all the time, go to Layout and animation → Layout → Text and buttons and choose Always visible. Touch screens always show the text. ![Media grid with text set always visible on top](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/9b7b6a4487dedd9bef93e2733c1154b4ba6034b1--960w.webp) ## Add hover animations Under Layout and animation → Animation, turn on Items on hover. Then pick an Item hover effect: Lift or Grow. ![Add a hover animation Grow or Lift for an image or video in the Media grid layout](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/fd81bdc1d72c7ca3e7d991a6440367214fc1a3ab--960w.webp) ## Add a section header The section can have an eyebrow, a title, a subtitle and call-to-action buttons. Click + next to the section in the editor to add an eyebrow or a call-to-action. ![Add media grid section header with a title, subtitle, eyebrows, and CTA buttons](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/e43d94dda447aedd52b56f3a663bae6f7ecdc678--960w.webp) The header sits above the tiles by default. To move it to the left of the tiles, go to Layout and animation → Layout → Section header content and choose Left. ![Move the section header to left in the media grid section](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/502c81edcc0f93ab5db15877ab56d3af17c7586f--960w.webp) ![Diner promotional layout with the heading “Spend a burgerlicious evening at Katie’s Diner” beside photos of burgers, fries, and drinks.](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/6b990b68b0be00321ebb212bcf31486464bce20f--960w.webp) ## Add content to the tiles Each tile can have an eyebrow, a title, text and call-to-action buttons. Click + next to a tile to add them. ![Add content items to the media grid tiles, showing title, text, eyebrows, and cta buttons on top of the image/video](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/bab449a553ddc629669550e2bed012c1250ecb39--960w.webp) ## Link a whole tile Click the link icon on a tile and add a link to make the whole tile clickable. Buttons and links inside the tile keep their own links. ![Make the whole tile a link in the media grid layout](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/a016af2c87041efee6628dfddd375efcc012d0ac--960w.webp) ## Change the look with the Edit styles chat ![Website editor displaying a diner-themed page with burger and fries photo tiles, alongside an AI chat panel for editing the media grid.](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/d1a8ce438273377caafef4fd6baff0732842e68e--960w.webp) In the Edit styles chat, describe the change you want. For example: * "Make the images square" * "Use 4 columns" (Grid) * "Tighter gaps between tiles" * "Square corners" * "Make the second tile large" (Mosaic) * "Make the title bigger" * "Make the tile text white" * "Make the shade behind the text darker" * "Give the header more room next to the images" If you are not entirely sure what you can edit, just ask LandingRabbit to plan the look and feel for you.