Having a SharePoint list with news title content and image

Question

Having a SharePoint list with news title content and image . Can you please share the html css rest API code to display each news (title summary and image) in each cell in 4 * 4 div.

Lokesh Varman · Answer

Not sure Give it a try News Grid /* Define the grid layout */ .grid-container { display: grid; grid-template-columns: repeat(4 1fr); grid-gap: 20px; } /* Style each news cell */ .grid-item { border: 1px solid #ccc; padding: 10px; } /* Style the news image */ .news-image { max-width: 100%; height: auto; } // Function to fetch data from SharePoint list using REST API function getNewsData() { const url =  ; // Replace with your SharePoint REST API URL fetch(url { method: 'GET' headers: { 'Accept': 'application/json;odata=verbose' } }) .then(response => response.json()) .then(data => { const newsItems = data.d.results; const grid = document.getElementById(news-grid); // Loop through the news items and populate the grid newsItems.forEach(newsItem => { const title = newsItem.Title; const summary = newsItem.Summary; const imageUrl = newsItem.ImageUrl; const newsCell = document.createElement(div); newsCell.classList.add(grid-item); const newsTitle = document.createElement(h2); newsTitle.innerText = title; const newsSummary = document.createElement(p); newsSummary.innerText = summary; const newsImage = document.createElement(img); newsImage.src = imageUrl; newsImage.classList.add(news-image); newsCell.appendChild(newsTitle); newsCell.appendChild(newsImage); newsCell.appendChild(newsSummary); grid.appendChild(newsCell); }); }) .catch(error => console.error(error)); } // Call the function to fetch and display news data getNewsData(); generated by - AI