Blog Layout

by NOVUSIDEA

HTML

<div id="blog-wrap">
    <div id="blog-posts">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere consequuntur, possimus doloribus officia vero harum odit facilis quia itaque qui impedit consequatur, commodi, labore quasi reiciendis. Eveniet odit, praesentium est!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere consequuntur, possimus doloribus officia vero harum odit facilis quia itaque qui impedit consequatur, commodi, labore quasi reiciendis. Eveniet odit, praesentium est!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere consequuntur, possimus doloribus officia vero harum odit facilis quia itaque qui impedit consequatur, commodi, labore quasi reiciendis. Eveniet odit, praesentium est!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere consequuntur, possimus doloribus officia vero harum odit facilis quia itaque qui impedit consequatur, commodi, labore quasi reiciendis. Eveniet odit, praesentium est!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere consequuntur, possimus doloribus officia vero harum odit facilis quia itaque qui impedit consequatur, commodi, labore quasi reiciendis. Eveniet odit, praesentium est!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere consequuntur, possimus doloribus officia vero harum odit facilis quia itaque qui impedit consequatur, commodi, labore quasi reiciendis. Eveniet odit, praesentium est!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere consequuntur, possimus doloribus officia vero harum odit facilis quia itaque qui impedit consequatur, commodi, labore quasi reiciendis. Eveniet odit, praesentium est!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere consequuntur, possimus doloribus officia vero harum odit facilis quia itaque qui impedit consequatur, commodi, labore quasi reiciendis. Eveniet...

CSS

#blog-wrap {
    background-color: #2196F3;
    padding: 20px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 4fr 300px;
}

#blog-posts,
#blog-side {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
}

#blog-posts {    
    
}

#blog-side {
    display: grid;
    grid-gap: 40px;
}