Show 3 boxes inside 2 columns instead of 3 columns inside my SPFX React sharepoint web part

john john 681 Reputation points
2021-11-26T10:06:27.543+00:00

I am trying to achieve this layout inside my SharePoint SPFx web part:-

152886-which.png

But currently i have this layout:-

152887-current.png

Here is my full code and description:-

I have a custom list inside my SharePoint online site as follow:-

152827-lisssssssssssss.png

where inside the list i define links to pages + categorize them using a field named "Featured". now i want to show the above 3 list items as shown in the first image.

Inside the SPFx react web part, i have the attached code.

152903-spfxcode.pdf

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
6,049 questions
SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
1,686 questions
No comments
{count} votes

1 answer

Sort by: Most helpful
  1. RaytheonXie_MSFT 14,386 Reputation points Microsoft Employee
    2021-11-29T08:38:26.317+00:00

    Hi @john john ,
    You can refer to the hero layout

    private _onRenderHeroItem =  (items: any, index: number | undefined): JSX.Element => {  
      const thumbRend = "https://media.akamai.odsp.cdn.office.net/uksouth1-mediap.svc.ms/transform/thumbnail?provider=url&inputFormat=jpg&docid=";  
      const secondItems = items.slice(1,5);  
      const firstItem = items.slice(0,1)[0];  
      var firstItemUrl = firstItem.Hyperlink ? firstItem.Hyperlink : "#";  
      var smalltemUrl;  
      return(  
        <div className={styles.heroItem}>  
          <div className={styles["flexcontainer"]}>  
            <div className={styles.focusItem}>  
               <div className={styles["flexitems"]}>                      
                  <a href={firstItemUrl}>  
                  <img src={firstItem.filePicker[0].fileNameWithoutExtension=='blankEntry154873'?firstItem.filePicker[0].fileAbsoluteUrl:thumbRend+firstItem.filePicker[0].fileAbsoluteUrl+"&w=960"}/>  
                  <div className={styles.heroTitle}>{firstItem.Title}</div>  
                  <div className={styles.description}><div className={styles.heroTitleHover}>{firstItem.Title}</div><div className={styles.info}>{firstItem.Description ? firstItem.Description.length>150 ? firstItem.Description.substring(0, 150)+".." : firstItem.Description : "Description coming soon"}</div></div>  
                  </a>  
              </div>  
            </div>  
          </div>  
          <div className={styles["flexcontainer"]}>  
                {secondItems.map((item) => (  
                  smalltemUrl= item.Hyperlink ? item.Hyperlink : "#",  
                  <div className={styles["flexitems"]}>  
                        <a href={smalltemUrl}>  
                        <img src={item.filePicker[0].fileNameWithoutExtension=='blankEntry154873'?item.filePicker[0].fileAbsoluteUrl:thumbRend+item.filePicker[0].fileAbsoluteUrl+"&w=960"}/>  
                        <div className={styles.heroTitle}>{item.Title}</div>  
                        <div className={styles.description}><div className={styles.heroTitleHover}>{item.Title}</div><div className={styles.info}>{item.Description ? item.Description.length>150 ? item.Description.substring(0, 150)+".." : item.Description : "Description coming soon"}</div></div>  
                        </a>  
                  </div>  
                ))}  
          </div>  
        </div>  
      );  
    

    Here is the complete code
    https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-hero-webpart


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.