Yes web can implement this using CSR. Refer below code:
Note : Change/Design HTML template and CSS accordingly (Refer variable listItemHtml). Here I have created a demo template only. You will have to your HTML and CSS according to your need.
Refer below CODE :
window.CSR = window.CSR || {};
window.CSR.listItem = {
customItemHtml: function (ctx) {
var listItemHtml = '<div class="container"><nav><ul><li><a href="#"><img src="' + ctx.CurrentItem.Image + '" height="50" width="50"></a></li></ul></nav>';
listItemHtml += '<article><h1>Test</h1><p>' + ctx.CurrentItem.multicheck + '</p><p>' + ctx.CurrentItem.LastName +'</p></article></div>'
return listItemHtml;
}
};
(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Header = "<span></span>";
overrideCtx.Templates.Item = window.CSR.listItem.customItemHtml;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
CSS for above code :
div.container {width: 50%;}
nav {float: left;max-width: 160px;margin: 0;padding: 1em;}
nav ul {list-style-type: none;padding: 0;}
nav ul a {text-decoration: none;}
article {margin-left: 170px;padding: 1em;overflow: hidden;}
OutPut of the above code :
