Skip to content

Instantly share code, notes, and snippets.

@clickstudio

clickstudio/HTML

Created September 10, 2019 01:14
Download ZIP

Revisions

  1. clickstudio revised this gist Sep 10, 2019. No changes.
  2. clickstudio created this gist Sep 10, 2019.
    19 changes: 19 additions & 0 deletions HTML
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    <div class="container">
    <div class="cards">
    <div class="card">
    <div class="card-inner">Hello there</div>
    </div>
    <div class="card">
    <div class="card-inner">Hello there</div>
    </div>
    <div class="card">
    <div class="card-inner">Hello there</div>
    </div>
    <div class="card">
    <div class="card-inner">Hello there</div>
    </div>
    <div class="card">
    <div class="card-inner">Hello there</div>
    </div>
    </div>
    </div>
    38 changes: 38 additions & 0 deletions SCSS
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    /* Grid will not work without this */
    *,* :before, *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    }

    body {
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    }

    .container {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid red;
    }

    .cards {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 30px);

    margin: -15px;
    }

    .card {
    width:50%;
    @media(max-width:400px) {
    width: 50%;
    }
    padding: 15px;
    }

    .card-inner{
    background:blue;
    }