title: Problem with CSS column-count and first element
body: <p>I've this masonry CSS layout make with CSS column-count:</p>
  
  <pre><code>.container-post{
  
  column-gap: 20px;
  margin: 0 auto;
  column-count: 2;
  }
  
  
  
  .box-article {
  display: inline-block;
  background: #ffffff;
  padding: 20px;
  margin: 0 0 15px;
  width: 100%;
  box-sizing: border-box;
  border: solid 1px gray;
  
  }
  
  
  
  .box-article img{
  width: 100%;
  }
  
  
  
  .box-article a{
      color: #000000;
  }
  
  .box-article h2{
      color: #000000;
      text-align: center;
  }
  </code></pre>
  
  <p>Here the HTML:</p>
  
  <pre><code>&lt;div class="container-post"&gt;   &lt;!-- start container --&gt;
  
      &lt;!-- starting fetch article from MySQL database with PHP --&gt;
    &lt;div class="box-article"&gt;
    &lt;a href="#"&gt;&lt;img src="image.jpg" style="width: 100%; height: 100%; object-fit:cover;" alt="image post" /&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;h2&gt;Post title&lt;/h2&gt;&lt;/a&gt;
    &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, ratione, sit, eos, repudiandae corporis quos beatae placeat autem nesciunt id sapiente doloremque debitis ipsa laborum nulla officia explicabo rerum tempore?&lt;/div&gt;
    &lt;div&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="box-article"&gt;
    &lt;a href="#"&gt;&lt;img src="image.jpg" style="width: 100%; height: 100%; object-fit:cover;" alt="image post" /&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;h2&gt;Post title&lt;/h2&gt;&lt;/a&gt;
    &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, ratione, sit, eos, repudiandae corporis quos beatae placeat autem nesciunt id sapiente doloremque debitis ipsa laborum nulla officia explicabo rerum tempore?&lt;/div&gt;
    &lt;div&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="box-article"&gt;
    &lt;a href="#"&gt;&lt;img src="image.jpg" style="width: 100%; height: 100%; object-fit:cover;" alt="image post" /&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;h2&gt;Post title&lt;/h2&gt;&lt;/a&gt;
    &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, ratione, sit, eos, repudiandae corporis quos beatae placeat autem nesciunt id sapiente doloremque debitis ipsa laborum nulla officia explicabo rerum tempore?&lt;/div&gt;
    &lt;div&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
  
         &lt;!-- end loop --&gt;      
   &lt;/div&gt;
  </code></pre>
  
  <p>Well, it works, but I want that first box is large like all container. I want make only first article with 1 column (image and text like other posts) and other posts on two columns (in masonry style). I've tried also :first-type and :first-child, but with no result.</p>
  
  <p>Any idea?
  Thank you!</p>