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

Question

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.

152903-spfxcode.pdf

Answer 1

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.

---