--- title: Project Grid View description: "#### Find Project Element Go to Add Button then search project and you can see \"PLP Project\"  Element. ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-1.jpg) #### Find Grid , List and Slider Option See below image Go to \"List\" Toggle and check \"Layout\" Drop down…" url: "https://pixelslibraryplus.com/docs/project-grid-view/" updated: "2026-05-25" category: Pixel Library Plus BD Elements / Project Element --- # Project Grid View #### Find Project Element Go to Add Button then search project and you can see "PLP Project"  Element. ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-1.jpg) #### Find Grid , List and Slider Option See below image Go to "List" Toggle and check "Layout" Drop down Select Grid ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout.jpg) #### Grid Layout - Design(Layout 1 to Layout 7) Option See below image Go to "List" Toggle and check "Design" Drop down There are total 7 Design for Grid. Please check [demo website](https://bdtemplatehub.com/breakdance-project-element) for designs ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Design.jpg) #### Grid Layout : No of Column Option Go to "Design" Tab and See "List" Toggle -> Items Per Row Option. These option is used for No of Project Display Per  Row - 1 Col,2 Col, 3 Col or 4 Col option and Responsive settings is available for this option. ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-No-of-Col.jpg) #### Grid Layout : Space Between Columns Go to "Design" Tab and See "List" Toggle -> Space Between Items. These option is used for Gap of Between Columns. ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-Col-Space.jpg) #### Grid Layout : Query Option See below image Go to "Query" Toggle and Select "Custom" then Click on "Edit Query". Here you need to select **Post type** : Projects **Posts per page** : set how many projects you want to display You can add extra meta query or other settings base on your requirements. ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Query.jpg) #### Grid Layout : Image Animation See "List" Toggle -> Image Animation Option. These option is used for image hover of project and it is available only for Layout 1 to Layout 4. Others layouts has different animations. ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Image-Animation.jpg) #### Grid Layout : Pagination See "Pagination" Toggle -> Select Numbers These option is used for display pagination and it works base on "Query" Toggle Set "**Posts per page**" option. ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Pagination.jpg) #### Grid Layout : Display Project Element Options **Title** - If you disable then title will not display and set title html tag. ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Title.jpg) **Content**- If you disable then content will not display and set Short or Long Description.we recommended used **Excerpt .** ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Content.jpg) **Button & New Tab**- Add Button Text, Select Icon and set Button Link Open in new Tab. ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Button.jpg) **Category & Category Link**- To Display Project Category and Link in projects. ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Display-Project-Category.jpg) **Display Filter & Custom Categories **- To Display Project Category as Filter and if you want to remove some category in Filter then please add Category ID's in **Custom Categories Option Eg. 1,5,6** How to Find Project Category ID. [Click Here](https://pixelslibraryplus.com/docs/project-cpt/) and see "Listing of Project Categories" ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Filter.jpg) #### Grid Layout : Design - Layout 5 Options **Design Animations** option is available for only layout 5 and there are 200+ animations hover effects. ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-5.jpg) **Content Animations** option is available for only layout 5 and there is animation for title,content and button. ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-5-Content-Animation-Title.jpg) **For Button** ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-5-Content-Animation-Button.jpg) **For Content** ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-5-Content-Animation-Content.jpg) **For Title** ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-5-Content-Animation-Delay.jpg) ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-5-Content-Animation-Effects.jpg) **Layout 5 Design Option** See Design Tab ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-5-Design-Option.jpg) #### Grid Layout : Design - Layout 6 Options ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-6.jpg) **Layout 6 Design Option** ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-6-Design-Option.jpg) #### Grid Layout : Design - Layout 7 Options ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-7.jpg) #### Grid Layout : Design Options **For Sizing -**Width and Layout ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-Sizing.jpg) **For Container** ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-Design-Option-1.jpg) **For Image** ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-Design-Option-2.jpg) **For Title** ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-Design-Option-3.jpg) **For Category** ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-Design-Option-4.jpg) **For Content/Description** ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-Design-Option-5.jpg) **For Background** ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-Design-Option-6.jpg) **For Button** ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-Design-Option-7.jpg) **For Isotope/Category Filter** ![Breakdance Projects](https://pixelslibraryplus.com/wp-content/uploads/2026/05/Breakdance-Dynamic-Project-Element-Grid-Layout-Design-Option-Isotrope.jpg)