<section class="grid">
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
  <article>7</article>
  <article>8</article>
  <article>9</article>
  <article>10</article>
  <article>11</article>
  <article>12</article>
  <article>13</article>
  <article>14</article>
  <article>15</article>
  <article>16</article>
  <article>17</article>
  <article>18</article>
  <article>19</article>
  <article>20</article>
</section>
html {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 16px;
}

*,
*:after,
*:before { 
 padding: 0;
 margin: 0;
 box-sizing: inherit;
}

.grid {
  min-height: 100vh;
  background-color: skyblue;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.grid > * { 
  padding: 2rem;
  text-align: center;
  background-color: steelblue;
}
    

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.