I'm playing around with accompanists

FlowRow

and try to place 2 equal items per row. Applying

fillMaxWidth(0.5f)

to every item ensures it occupies half of the max width but unfortunately it does not consider the

mainAxisSpacing

of 4.dp. When I apply the

mainAxisSpacing

only 1 item is placed per row because the 0.5f does not consider the 4.dp. Any ideas how to handle this properly? Btw. I'm aware that a

LazyVerticalGrid

would fit better here. I'm playing around with some layouts for the learning effect.

FlowRow(
	modifier = Modifier
		.fillMaxWidth()
		.border(1.dp, Color.Red),
	mainAxisSize = SizeMode.Expand,
	//mainAxisSpacing = 4.dp,
	crossAxisSpacing = 4.dp,
) {
	actions.forEachIndexed { i, action ->
		FlowItem(
			modifier = Modifier.fillMaxWidth(0.5f),
			title = stringResource(id = action.titleRes),
			description = stringResource(id = action.descriptionRes),
			backgroundColor = if (i % 2 == 0) LightGreen600 else LightGreenLight600,
			onItemClick = onAction
		)
	}
}

I wrote something really dirty for this case, I'll maybe see if I can clean it up and send it

Did you maybe use the

.layout {}

modifier of one sibling?

I hacked it with flowrow

Did you find some time to clean up your solution. Snippets are sufficient