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

john john 681 Reputation points

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


But currently i have this layout:-


Here is my full code and description:-

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


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.


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

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

    private _onRenderHeroItem =  (items: any, index: number | undefined): JSX.Element => {  
      const thumbRend = "";  
      const secondItems = items.slice(1,5);  
      const firstItem = items.slice(0,1)[0];  
      var firstItemUrl = firstItem.Hyperlink ? firstItem.Hyperlink : "#";  
      var smalltemUrl;  
        <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={}>{firstItem.Description ? firstItem.Description.length>150 ? firstItem.Description.substring(0, 150)+".." : firstItem.Description : "Description coming soon"}</div></div>  
          <div className={styles["flexcontainer"]}>  
                { => (  
                  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={}>{item.Description ? item.Description.length>150 ? item.Description.substring(0, 150)+".." : item.Description : "Description coming soon"}</div></div>  

    Here is the complete code

    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.