Hello world!

by ethanpil

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">

    <main class="container">
      <h2>grid-2</h2>
      <div class="grid grid-2">
        <article>1</article>
        <article>2</article>
        <article>3</article>
        <article>4</article>
        <article>5</article>
        <article>6</article>
        <article>7</article>
        <article>8</article>
      </div>    
      <hr>
      <h2>grid-3</h2>
      <div class="grid grid-3">
        <article>1</article>
        <article>2</article>
        <article>3</article>
        <article>4</article>
        <article>5</article>
        <article>6</article>
        <article>7</article>
        <article>8</article>
      </div>    
      <hr>
      <h2>grid-4</h2>
      <div class="grid grid-4">
        <article>1</article>
        <article>2</article>
        <article>3</article>
        <article>4</article>
        <article>5</article>
        <article>6</article>
        <article>7</article>
        <article>8</article>
      </div>
      <hr>
      <h2>grid-5</h2>
      <div class="grid grid-5">
        <article>1</article>
        <article>2</article>
        <article>3</article>
        <article>4</article>
        <article>5</article>
        <article>6</article>
        <article>7</article>
        <article>8</article>
      </div>
      <hr>
      <h2>grid-6</h2>
      <div class="grid grid-6">
        <article>1</article>
        <article>2</article>
        <article>3</article>
        <article>4</article>
        <article>5</article>
        <article>6</article>
        <article>7</article>
        <article>8</article>
      </div>
      <hr>
      <h2>grid-8</h2>
      <div class="grid grid-8">
        <article>1</article>
        <article>2</article>
        <article>3</article>
        <article>4</article>
        <article>5</article>
        <article>6</article>
       ...

CSS

.grid-3 {
   grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
   grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
   grid-template-columns: repeat(4, 1fr);
}
.grid-5 {
   grid-template-columns: repeat(5, 1fr);
}
.grid-6 {
   grid-template-columns: repeat(6, 1fr);
}
.grid-8 {
   grid-template-columns: repeat(8, 1fr);
}

@media only screen and (max-width: 768px) {
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-8 {
     grid-template-columns: repeat(1, 1fr);
  }
}