title: Jetpack Compose LazyVerticalGrid items having a different size
body: <p>When I'm trying to use LazyVerticalGrid to display a list of images, some grid items have a different size even the images itself have exactly same size 240x178.</p>
  <p>I tied to use <code>modifier.fillMaxWidth()</code>, <code>modifier.matchParentSize()</code>, <code>modifier.fillMaxHeight()</code>, <code>modifier.fillMaxWidth()</code>, <code>modifier.fillParentMaxHeight()</code>, <code>modifier.fillParentMaxWidth()</code>, <code>modifier.requiredHeight(imageHeight)</code>, <code>modifier.requiredWidth(imageWidth)</code> but nothing had helped me to make images fill all available space without leaving any empty spaces between and some images continue to be not the same size with the others.</p>
  <p><a href="https://i.stack.imgur.com/XV6og.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XV6og.jpg" alt="current grig display" /></a></p>
  <p>Below is my current implementation and I'm using Coil for image loading if its important</p>
  <pre><code> @OptIn(ExperimentalFoundationApi::class)
      @Composable
      fun TreasureGrid(treasures: List&lt;MapTreasure&gt;) {
          val configuration = LocalConfiguration.current
  
          val imageWidth = configuration.screenWidthDp.dp / 4
          val imageHeight = (imageWidth.times(1.348f))
          LazyVerticalGrid(
              cells = GridCells.Adaptive(imageWidth)
          ) {
              items(treasures.size) {
                  TreasureItem(
                      treasures[it],
                      Modifier.requiredHeight(imageHeight).requiredWidth(imageWidth)
                  )
              }
          }
      }
  
      @Composable
      fun TreasureItem(mapTreasure: MapTreasure, modifier: Modifier) {
          val resId = TMApplication.instance.resources.getIdentifier(
              mapTreasure.image,
              &quot;drawable&quot;,
              TMApplication.instance.packageName
          )
          val matrix = ColorMatrix()
          val isOpened = getUser()?.openedTreasures?.contains(mapTreasure.name) == true
          if (isOpened.not()) {
              matrix.setToSaturation(0F)
          }
          Box {
              AsyncImage(
                  model = resId,
                  contentDescription = mapTreasure.description,
                  modifier = modifier.clickable {
                      if (isOpened) {
                          activity?.let { DialogUtils.showTreasureInfoDialog(it, mapTreasure) }
                      } else {
                          Toast.makeText(activity, &quot;Treasure not found&quot;, Toast.LENGTH_SHORT).show()
                      }
                  }.matchParentSize(),
                  colorFilter = ColorFilter.colorMatrix(matrix)
              )
              val alpha = if (isOpened) 0f else 1f
              AsyncImage(
                  model = R.drawable.treasure_key,
                  contentDescription = mapTreasure.description,
                  modifier = modifier.rotate(90f).scale(0.3f).alpha(alpha)
              )
          }
      }
  </code></pre>
  <p>Any suggestions on how to make every grid item same size and remove the padding around it are highly appreciated</p>