Semantic UI masonry grid (CSS)

by s_yoshiki

HTML

<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<div class="ui container">
    <div class="ui three column doubling stackable masonry grid">

        <div class="column">
            <div class="ui fluid card">
                <div class="image">
                    <img src="http://www.hp-stylelink.com/news/images/20130821_main.jpg">
                </div>
                <div class="content">
                    <a class="header" href="https://tech-blog.s-yoshiki.com/2018/08/363/" target="_blank">
						世界で最も最悪なソースコードが発見される【画像あり】
					</a>
                    <!-- <div class="meta">
                        <span class="date">Joined in 2013</span>
                    </div> -->
                    <div class="description">
					SELECT *…が目に入った瞬間に、「おおこれは…」と思ったが、他にも酷い部分がたくさんある。
SQL文を直接投げているの時点でもうアレだが、全件取得した上でループ処理を走らせているのがとても気になる。WHERE句使わんかったのかと
                    </div>
                </div>
                <div class="extra content">
					<span class="right floated">
            			2018年 5月 1日
          			</span>
                    <span>
            			<a href="https://tech-blog.s-yoshiki.com/2018/08/363/" target="_blank">
							<i class="linkify icon"></i>
							show more
						</a>
          			</span>
                </div>
            </div>
        </div>

        <div class="column">
            <div class="ui fluid card">
                <div class="content">
                    <div class="right floated meta">2018年 7月 11日</div>
                    <img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
					s-yoshiki
                </div>
                <div class="image">
                    <img src="https://colab.research.google.com/img/colab_favicon_256px.png" 
						class="ui wireframe image">
                </div>
                <div class="content">
					<a class="header"...

CSS

/* body {
    background-color: #f9fafb;
    padding-top: 1rem;
}

.masonry.grid {
    display: block;
}

@media only screen and (min-width: 768px) {
    .masonry.grid {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 0;
        -moz-column-gap: 0;
        column-gap: 0;
    }
    .ui.doubling.masonry.grid[class*="three column"]>.column {
        width: 100% !important;
    }
}

@media only screen and (min-width: 992px) {
    .masonry.grid {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}
 */