CSS Grid - Hiển thị bài đăng blog dưới dạng lưới

<div class="container row">
        <div class="widget Blog" data-version="2" id="Blog1">
            <div class="post-outer">Bài 1</div>
            <div class="post-outer">Bài 2</div>
            <div class="post-outer">Bài 3</div>
            <div class="post-outer">Bài 4</div>
            <div class="post-outer">Bài 5</div>
            <div class="post-outer">Bài 6</div>
            <div class="post-outer">Bài 7</div>
            <div class="post-outer">Bài 8</div>
            <div class="post-outer">Bài 9</div>
            <div class="post-outer">Bài 10</div>
            <div class="post-outer">Bài 11</div>
            <div class="post-outer">Bài 12</div>
            <div class="post-outer">Bài 13</div>
            <div class="post-outer">Bài 14</div>
            <div class="post-outer">Bài 15</div>
            <div class="post-outer">Bài 16</div>
            <div class="post-outer">Bài 17</div>
            <div class="post-outer">Bài 18</div>
            <div class="post-outer">Bài 19</div>
            <div class="post-outer">Bài 20</div>
        </div>
    </div>
        <style>body {
        margin: 0;
        padding: 0;
        background: #eee;
        font-size: 100%;
        box-sizing: border-box;
    }

.row {
        width: 1200px
    }

.container {
        margin: 3em auto 0;
    }

.post-outer {
        float: left;
        width: calc(95% / 4);
        height: 200px;
        margin: 0 1.5% 20px 0;

/* css for demo */
        background: #bbb;
        color: #222;
        font-size: 2em;
        text-align: center;
        font-weight: bold
    }
    /* bỏ margin-right cho các div con bên phải cùng 4,8,12,...(do chia làm 4 cột 1 hàng) */

.post-outer:nth-of-type(4n) {
        margin: 0 0 20px 0;
    }

/*! clear fix
     do chia 1 hàng gồm 4 bài dùng float:left nên các bài thứ 1,5,9,13,... sẽ cần thuộc tính clear:both
     */

.post-outer:nth-of-type(4n+1) {
        clear: both;
    }
    /* clear fix cho thành phần cha */

.widget.Blog::before,
    .widget.Blog::after {
        clear: both;
        content: '';
    }
    /* Responsive  */

@media screen and (max-width: 1250px) {
        .row {
            width: auto
        }
        .container {
            padding: 0 1em;
        }
    }
    /* Mobile */

@media screen and (max-width: 768px) {
        .post-outer {
            float: none;
            width: auto;
            margin: 0 0 20px;
        }</style>

​x
 
<div class="container row">
        <div class="widget Blog" data-version="2" id="Blog1">
            <div class="post-outer">Bài 1</div>
            <div class="post-outer">Bài 2</div>
            <div class="post-outer">Bài 3</div>
            <div class="post-outer">Bài 4</div>
            <div class="post-outer">Bài 5</div>
            <div class="post-outer">Bài 6</div>
            <div class="post-outer">Bài 7</div>
            <div class="post-outer">Bài 8</div>
            <div class="post-outer">Bài 9</div>
            <div class="post-outer">Bài 10</div>
            <div class="post-outer">Bài 11</div>
            <div class="post-outer">Bài 12</div>
            <div class="post-outer">Bài 13</div>
            <div class="post-outer">Bài 14</div>
            <div class="post-outer">Bài 15</div>
            <div class="post-outer">Bài 16</div>
            <div class="post-outer">Bài 17</div>
            <div class="post-outer">Bài 18</div>
            <div class="post-outer">Bài 19</div>
            <div class="post-outer">Bài 20</div>
        </div>
    </div>
        <style>body {
        margin: 0;
        padding: 0;
        background: #eee;
        font-size: 100%;
        box-sizing: border-box;
    }
​
    .row {
        width: 1200px
    }
​
    .container {
        margin: 3em auto 0;
    }
​
    .post-outer {
        float: left;
        width: calc(95% / 4);
        height: 200px;
        margin: 0 1.5% 20px 0;
​
        /* css for demo */