title: swift 4 set cells with different heights and width on the same UICollectionView vertical flow
body: <p>I'm trying to make images grid like the below image
  <a href="https://i.stack.imgur.com/e635C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e635C.png" alt="enter image description here"></a></p>
  
  <p>I tried the below code</p>
  
  <pre><code>import UIKit
  class ViewController: UIViewController,UICollectionViewDelegate, UICollectionViewDataSource  {
  @IBOutlet weak var collectionViw: UICollectionView!
  
  var widthss = [59.0,59.0,59.0,121.0,59.0,59.0,59.0,59.0,59.0,59.0,28.0,28.0,59.0,59.0,] as [CGFloat]
  var heights = [36.0,36.0,36.0,76.0,36.0,76.0,36.0,36.0,36.0,76.0,36.0,36.0,36.0,76.0,] as [CGFloat]
  override func viewDidLoad() {
      super.viewDidLoad()
  
  }
  func numberOfSections(in collectionView: UICollectionView) -&gt; Int {
      return 1
  }
  func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -&gt; Int {
      return heights.count
  }
  func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -&gt; UICollectionViewCell {
      let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! UICustomCollectionViewCell
      // Customize cell height
      cell.frame = CGRect(x: cell.frame.origin.x, y: cell.frame.origin.y , width: widthss[indexPath.row], height: heights[indexPath.row])
  
      return cell
      }
  
  
  
  
  }
  extension ViewController: UICollectionViewDelegateFlowLayout {
      func collectionView(_ collectionView: UICollectionView,
                          layout collectionViewLayout: UICollectionViewLayout,
                          sizeForItemAt indexPath: IndexPath) -&gt; CGSize {
  
  
      return CGSize(width: widthss[indexPath.row], height: heights[indexPath.row])
  }
  func collectionView(_ collectionView: UICollectionView,
                      layout collectionViewLayout: UICollectionViewLayout,
                      minimumInteritemSpacingForSectionAt section: Int) -&gt; CGFloat {return 1.0
  }
  func collectionView(_ collectionView: UICollectionView, layout
      collectionViewLayout: UICollectionViewLayout,
                      minimumLineSpacingForSectionAt section: Int) -&gt; CGFloat {
      return 1.0
  }}
  </code></pre>
  
  <p>at the end, i found the result like the below image,
  <a href="https://i.stack.imgur.com/JHjrS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JHjrS.png" alt="enter image description here"></a></p>
  
  <p>what I need is to make the collection view cells like the first image
  Anyone have an idea where is my mistake
  thanks in advance </p>