title: css grid with images the first image 50% width and all the others 25%
body: <p>I want to make a grid with images. All images are have the same dimensions. The first will be 50% width and all the others 25%. I wrote the following code. In most resolutions is OK, but when i resize the window in some cases the first image it brokes, and is not 50%.</p>
  
  <pre><code>&lt;img src="1.jpg" class="img1" /&gt;
  &lt;img src="1.jpg" class="img2" /&gt;
  &lt;img src="1.jpg" class="img2" /&gt;
  &lt;img src="1.jpg" class="img2" /&gt;
  &lt;img src="1.jpg" class="img2" /&gt;
  &lt;img src="1.jpg" class="img2" /&gt;
  &lt;img src="1.jpg" class="img2" /&gt;
  &lt;img src="1.jpg" class="img2" /&gt;
  &lt;img src="1.jpg" class="img2" /&gt;
  &lt;img src="1.jpg" class="img2" /&gt;
  
  .img1
  {
      width:50%;
      float:left;
  }
  
  .img2
  {
      width:25%;
      float:left;
  }
  </code></pre>