Feel free to download the practice files or try these concepts on your own. Design the employee card layout — our employee card consists of a shape with an image fill, some text, and graphics. Select the entire card, and then click the Repeat Grid button in the Property Inspector on the right. Notice that a green dotted line with two handles appears around the element.
Drag the green handles to repeat the employee card horizontally, then vertically. To adjust the distance between the cards, select the grid, then hover your cursor over the space between the cards. The cursor changes to a double arrow and XD highlights the space with pink. Click and drag to set the desired horizontal and vertical spacing between the cards.
Change the color, style, and size of the Employee Name text to suit your design. You can adjust the style of any other elements in the card as well. Notice that style changes, such as color, size, and positioning, are global and affect all the elements of the same type in the grid.
With the Select tool still chosen, replace the placeholder image by dragging multiple images from your computer onto the shape that includes the image fill. You should now have a variety of employee profile images in your grid. Use Control-click (Windows) or Command-click (macOS) to select an item inside a grouped object.
Add employee names by dragging a return-separated plain text file with no formatting, saved with a .txt extension, onto the Employee Name object. You should now see unique employee names in your grid. You can change an individual name by double-clicking the name and typing over it.
Repeat the process for employee titles and phone numbers. See how fast and easy it is to create an employee bio page from the one element you designed.
Use Repeat Grid to quickly lay out lists, galleries, and other elements in your web and app designs.
With Adobe Stock, you have access to more than 100 million high-quality, royalty-free images including photos, graphics, videos, and templates to jump-start your creative projects. Try Adobe Stock and get 10 free images.