PrimeFlex Grid rendering Issue

Question

I want to design a page with primereact flexgrid but its not working, code is below... (copied from primereact site)

import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

and

renderGridItem(post) {
        return (
            <div style={{ padding: '.5em' }} className="p-col-12 p-md-3">
                <Panel header={post.title} style={{ textAlign: 'center' }}>
                    <img src={server_url+`/attachments/${post.thumbnail}`} alt={post.title}/>
                    <div className="car-detail">{post.customer.full_name}</div>
                    <hr className="ui-widget-content" style={{ borderTop: 0 }} />
                    <Button icon="pi pi-search" onClick={(e) => this.setState({ selectedPost: post, visible: true })}></Button>
                </Panel>
            </div>
        );
    }

Page is showing vertical data instead of grid view...

Please help if anyone can...

Answer 1

Since this is the Flexgrid from Primeflex the problem might be that you are missing the "primeflex/primeflex.css" as mentioned here in the Angular Documentation. They are very inconsistent when providing documentation throughout all of their webpages, it could simply be the case that someone forgot to add the information on every page when they switched from their old grid to Flexgrid.