HTML
33
1
<div class="container">2
<div class="card">3
<p>4
First forget inspiration. Habit is more dependable. Habit will sustain you whether you’re inspired or not. Habit will help you finish and polish your stories. Inspiration won’t. Habit is persistence in practice.5
</p>6
</div>7
<div class="card">8
<p>9
First forget inspiration. Habit is more dependable. Habit will sustain you whether you’re inspired or not. Habit will help you finish and polish your stories. Inspiration won’t. Habit is persistence in practice.10
</p>11
</div>12
<div class="card">13
<p>14
First forget inspiration. Habit is more dependable. Habit will sustain you whether you’re inspired or not. Habit will help you finish and polish your stories. Inspiration won’t. Habit is persistence in practice.15
</p>16
</div>17
<div class="card">18
<p>19
First forget inspiration. Habit is more dependable. Habit will sustain you whether you’re inspired or not. Habit will help you finish and polish your stories. Inspiration won’t. Habit is persistence in practice.20
</p>21
</div>22
<div class="card">23
<p>24
First forget inspiration. Habit is more dependable. Habit will sustain you whether you’re inspired or not. Habit will help you finish and polish your stories. Inspiration won’t. Habit is persistence in practice.25
</p>26
</div>27
<div class="card">28
<p>29
First forget inspiration. Habit is more dependable. Habit will sustain you whether you’re inspired or not. Habit will help you finish and polish your stories. Inspiration won’t. Habit is persistence in practice.30
</p>31
</div>32
</div>33
CSS
52
1
:root {2
--spacer: 0.5em;3
--columns: 1;4
}5
6
html {7
box-sizing: border-box;8
}9
10
*, *:before, *:after {11
box-sizing: inherit;12
}13
14
body {15
background-color: #eff1fa;16
color: #555;17
font-size: 1.1em;18
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;19
}20
21
.container {22
margin: 40px auto;23
max-width: 900px;24
display: flex;25
flex-wrap: wrap;26
}27
28
.card {29
background-color: #fff;30
max-width: calc((100% / var(--columns, 1)) - var(--spacer, 0.5em) * 2);31
border: 1px solid #6f777e;32
margin: var(--spacer, 0.5em);33
padding: var(--spacer, 0.5em);34
}35
36
p {37
margin: 0;38
}39
40
@media screen and (min-width: 480px) {41
:root {42
--spacer: 0.75em;43
--columns: 2;44
}45
}46
47
@media screen and (min-width: 720px) {48
:root {49
--spacer: 1em;50
--columns: 3;51
}52
}JS
1
1